Superfish glitch in IE7 - Dropdowns fall behind images

Permalink 2 users found helpful
I have been researching this online and still can't get my drop down menus to work in IE7 (IE, that big time waster for us developers). The drop downs fall behind the images on the page instead of in front. Before you answer the obvious answer, z-index does not work in IE7 the way it is supposed to. So, I'm wondering if anyone has run into this problem, and knows a hack or trick to get the drop downs to display in front? To view:http://www.pathology.washington.edu/clinical/collagen/...

sschildbach
 
Tony replied on at Permalink Reply
Tony
try increasing the zIndex of the parent elements that contain the superfish menu.
sschildbach replied on at Permalink Reply
sschildbach
With all due respect Tony, that was the answer that is supposed to work, but does not in IE7; unless I am mistaking what the parent div is. I tried every div above the image and applied a higher z-index, with and without an assigned position:relative too, but the drop down still falls behind the image. Could I have more specifics if you have the time?
Tony replied on at Permalink Reply
Tony
sorry, I've seen a lot of people with this same problem, and it tends to be the zIndex of one of the parent elements containing the superfish block, so i assumed that the same thing was happening for your site. (oops, i'm not reading very thoroughly today, you already tried the position:relative thing...)
Tony replied on at Permalink Reply
Tony
going to see if I can reproduce it...
Tony replied on at Permalink Reply 1 Attachment
Tony
well, I tried it on IE6 and page isn't loading correctly, and the entire menu is missing (see attachment). Then I tried it out in IE8 and it appears to be working fine. if you can get it displaying in IE6 I'll try to help out with the zIndex issue, otherwise someone else will have to help with the IE7 debugging.
sschildbach replied on at Permalink Reply
sschildbach
Ya, I know the menu bar is not working in IE6, but I've given up on that browser. I know the word around town is to still design for IE6, but I think it is the user's responsibility to upgrade their IE6 considering it's ancient in computer years and upgrading is free and easy. Not too sure why you can't troubleshoot IE7, which is the source of my problem and question, but I understand if you don't have time.
Mnkras replied on at Permalink Reply
Mnkras
Tony, mouse over the dropdown menu here:http://www.concrete5.org/community/karma/news/totally-random-episod...

i only experience the "behind" problem when there is either a slideshow block or anything flash or that changes.
sschildbach replied on at Permalink Reply
sschildbach
Mnkras and all who wonder why the superfish drop downs fall behind images and slideshows in IE7. The answer is not what you would think, but I figured it out thanks to:http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug...

To correct this glitch the two parent items of the objects have to be set to position:relative; and the top div has to have a higher z-index. In my case, which is the case for many C5 templates, my superfish menu bar is in id="header" and my images were in id="center" (this may vary for you). I gave the header a z-index of 2 and center a z-index of 1 and the problem was fixed!
noahisaac replied on at Permalink Reply
sschildbach: thank you for saving me lots of time. I would have wasted two hours trying to resolve this, and then given up before I figured it out.
Jott replied on at Permalink Reply
I just made an account here so that I could say THANK YOU!!! The fact that you were kind enough to take a few minutes and post your solution just saved me god knows how much time banging my head against ie, which is about my absolute least favorite thing to do.

so, thanks.