Manohman
Element id "contact_information" is positioned absolutly which i imagine is
making the div float above everything. Also because you are using other
absolute positioned elements you may have to use some z-index values,
especially in IE because a lot of the times it doesnt play nice.
Another thing to look at is to nest your containers a bit more. You are
targeting an element on the same level as the other elements on the DOM.
Create a fresh container and position THAT absolute and then nest everything
in there.
<div> -- absolute
<div> -relative
<div> - sliding element
Remember, the further down the DOM the element is the higher the stacking
order.
Also, be careful with your ajax content. I notices you are oulling in meta
tags and title tags and link tags with your responseText. This is going to
play havock with your DOM moving forward.
Some things to look at
Steve
-----Original Message-----
From: [email protected]
[mailto:[EMAIL PROTECTED] On Behalf Of Manohman
Sent: Monday, 17 November 2008 10:47 PM
To: MooTools Users
Subject: Mootools IE6 overflow bug
Hi all,
I've detailed this problem before but had no suggestions as I think my
description was too drawn out. I will try and be more concise this
time as I'm still having the problem and I'm getting really frustrated
with it.
I've uploaded a working example of the problem to:
http://iol.ie/~jtol/fxslide/
If you clock the 'contact' button in IE6 or IE7 the content that
slides out (fx.slide) will float above the entire menu content on the
left, rendering it unuseable. It works fine in Firefox and Safari.
This problem has been detailed as a bug in IE that incorrectly
overflows content that has been a position of 'relative'. All the
solutions are not working for me as they seem specific to simpler
basic html and css pages that don't involve javascript or mootools. I
believe the problem lies in an additional 'wrapper' div that fx.slide
adds outside the sliding content. One suggestion mentioned I should
not use the default wrapper and try and create my own that I can style
and so work around the bug. I attempted to do so by changing the
following:
<div id="sliderwindow"> </div>
to:
<div id ="newwrapper">
<div id="sliderwindow"> </div>
</div>
and in my javascript I tried adding a wrapper option to fx.slide to
point to this new div:
var mySlide = new Fx.Slide('sliderwindow',{wait: false, duration:
1000, mode: 'horizontal', wrapper: 'newwrapper'});
But firebug is showing me that there's still a regular default 'div'
wrapper around the sliderwindow and not a 'newwrapper', so the wrapper
is not working. Of course, the wrapper may not be the cause of my
problems but it's my only lead so far. Any suggestions? Thanks.
