The stylesheet shows this....
#contact_information {
position: absolute;
top: 150px;
left: 250px;
width: 200px;
height: 50px;
font-family: Georgia, Arial, Helvetica;
font-size: 11px;
line-height: 16px;
}
Looks absolute to me
-----Original Message-----
From: [email protected]
[mailto:[EMAIL PROTECTED] On Behalf Of Manohman
Sent: Tuesday, 18 November 2008 12:22 AM
To: MooTools Users
Subject: Re: Mootools IE6 overflow bug
Steve, thankyou for your prompt reply and for suggesting relevant
problems that were beyond what we had noticed ourselves.
One thing came to our attention immediately: 'contact_information' is
styled position: relative yet firebug is showing it as position:
absolute. This is very confusing.
On Nov 17, 1:02 pm, "Steve Onnis" <[EMAIL PROTECTED]> wrote:
> 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.
