Internet Explorer Z-Index problem

[BeeDev]

The URL: http://tiny.cc/Wil5f

The problem: Top main menu dropdown hides under the fading images.

 

I've been pulling my hair out for the last few days trying to fix this.

Basically, things are fine on standards compliant browsers, but on IE6 and IE7 there's a z-index bug that I cannot get rid of.

 

If you hover over "News" or "Services" on the main menu, the dropdown hides behind the fading images underneath the menu. As suggested on some websites that clarify the bug and its cause, I've tried setting the z-index of the parent elements which are relatively positioned to no avail.

 

Does anyone have any ideas?

 

Thanks.

[Susie]

Without a way to test this on the fly, I'm not sure if my suggestion will work, but this is something that John/shelfimage has helped me with on numerous occasions and this is how he does it.

 

Can you try placing the z-index on the #menus li ul and try bumping it way up? I had the same issue on this website (hover over Products) and the way he solved it was to use #menu li ul {z-index: 100;}. Instead of placing it on the li, it's on the child ul.

 

I hope this makes sense. These things always challenge me. :/

 

ETA: The website I showed you....ugh. Ignore all the image issues. My client takes care of all maintenance and it did NOT look like this when I handed it over.

Edited December 22, 2009 by Susie

[PicnicTutorials]

Hello, I see you using IERoot extra div setup. How are you targeting the individual IE's that way? The reason I ask, I just did a whole write up on that very thing.

 

If you want to find a better solution, you'll probably have to setup a stripped down test page - that thing is large. Unless Wickman can dig through it (I couldn't). The problem is probably the position relative on the photos div. I see your menu is already position absolute. If you put the menu below the photos in the html that would probably fix it.

[BeeDev]

Thanks for your suggestion Susie,

 

I have tried your method, but it hasn't made any difference unfortunately.

 

If there's more ideas please write them down, willing to try anything at this point

[BeeDev]

@Eric - That IERoot div was there from a different website. I was just re-using the template from another website and the template was from the time when IE8 wasn't out, and IE7 and 6 shared the similar bugs The website is : http://www.rsst.org.uk - but this one also has a drop-down menu, and similar fading images underneath, I can't remember how I managed to fix that ... it's doing my head in lol

 

Thanks for your suggestions, I will try make a stripped down version if i get the time.

[BeeDev]

I see your menu is already position absolute. If you put the menu below the photos in the html that would probably fix it.

 

I think you just solved it This site has been in production for months, and I forgot that I had the menu absolutely positioned inside the logo div. Once I set a z-index to the div#logo the menu gone over the photos div

 

Thanks Susie & Eric for your help & time looking into it.