My javascript drop down navigation menu displays behind content in internet explorer 7

OK, so I'm working on a redesign and we've got most of our cross-browser CSS compatibility bugs worked out - except for a glaring one with ie7.

The issue is that we are using a JavaScript for a navigational menu drop down. In all browsers except the noted culprit everything functions as expected.

However, in IE7 I'm getting the drop down appe开发者_开发知识库aring behind my other page elements, as though the z-index was set to something negative. But I do in fact have a CSS rule applied that sets this element to a z-index of 4000, and used that rule to correct the same issue on modern browsers.

For some reasons IE7 isn't recognizing the rule. Does IE7 not support this CSS rule?? If not, any suggestions for how to resolve it for IE7? A JavaScript solution?

Here's the page in question: http://betawww.helpcurenow.org/

Thanks!

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.

I also ran into this problem, but assigning a high z-index to the containing element (menu) did not resolve the problem in itself. I had to add position: relative to push it in front of the stubborn script (of course, assigning z-index: 0 to the image script).

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.

This could be part of the problem, if you need a JS solution, you might look into the following project:

http://code.google.com/p/ie7-js/

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.

This is very useful. Thank you so much.

Put your menu in a new DIV and give z-index (greater value) to that DIV.

I had this problem and I put this code in the page(s) with the issues and it solved it. Just replace div with whatever the element is.

<script>$(function() {
var zIndexNumber = 1000;
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>