Solved the problem. I can't get fx.slide to set a new 'wrapper' no
matter what I tried, but I was able to style the one it created itself
in the "this.wrapper = new Element('div', {'styles': $extend
(this.element.getStyles('margin')....... " line of the main
mootools.js. I just had to make the original wrapper it creates have
both a position: relative and overflow: hidden - I was too hellbent on
trying to create a new wrapper because I thought you could not style
the original one.
Thanks for all the help.
On Nov 17, 1:39 pm, Manohman <[EMAIL PROTECTED]> wrote:
> It worked fine on the contact menu until we relatively positioned the
> 'contact_information'. All the other menus are positioned statically
> or absolutely. Unfortunately we need to position 'contact_information'
> relatively. We have thought of one or two possible workarounds but the
> content is going to be updated in the future and we are trying to nip
> this in the bud rather than workaround it now and run into it later.
>
> On Nov 17, 1:30 pm, "Steve Onnis" <[EMAIL PROTECTED]> wrote:
>
> > Keep in mind also, it works correctly on the other menus so must be
> > something on your side making it do that
>
> > -----Original Message-----
> > From: [email protected]
>
> > [mailto:[EMAIL PROTECTED] On Behalf Of Manohman
> > Sent: Tuesday, 18 November 2008 12:28 AM
> > To: MooTools Users
> > Subject: Re: Mootools IE6 overflow bug
>
> > Please excuse the last remark, I was referring to an updated
> > stylesheet that has superseded the one on the example site. The
> > contact_information is styled as position: relative in our newer
> > attempts at getting it all to work.
>
> > We're going to have a long look at the suggestions you've made, thanks
> > again.
>
> > On Nov 17, 1:22 pm, Manohman <[EMAIL PROTECTED]> wrote:
> > > 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.
