BeeDev Posted December 22, 2009 Report Share Posted December 22, 2009 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. Quote Link to comment Share on other sites More sharing options...
Susie Posted December 22, 2009 Report Share Posted December 22, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted December 22, 2009 Report Share Posted December 22, 2009 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 22, 2009 Author Report Share Posted December 22, 2009 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 Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 22, 2009 Author Report Share Posted December 22, 2009 @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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 22, 2009 Author Report Share Posted December 22, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.