Why is menu displaying behind image?

Question

Hi At this site: http://www.multiway.dk/ The dropdown menu is displaying behind the header image, which i dont quite understand as the menu has z-index: 100; and the image has z-index:1;

It works fine in FF, but in IE it doens't work??

Answer 1

This is a well known bug in IE.

Try looking at

http://stackoverflow.com/questions/2355081/ie-is-ignoring-z-index-on-positioned-elements

or

http://drupal.org/node/84608

Answer 2

Yeh I had this a while back. I personally used:

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

plenty of fixes out there (:

Answer 3

This is the famous Z-Index Bug

For some reason, Internet Explorer does some pretty funky things, and has several known bugs with it’s rendering engine that drive web developers like me crazy. While most of the known bugs occur in relatively obscure situations and go largely unnoticed, there are a few that really stick out and cause web developers to waste many hours trying to fix them. The way IE7 renders z-index stacking orders is one of them.

One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues. If you’re using jQuery (the best Javascript library there is), here’s the quick fix:

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

Ref

---

Edit : Move that jquery code to IE conditional comments.

<!--[if IE lte 7]>
<script type="text/javascript">
$(document).ready(function(){

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

$(".panel img").css("z-index","-1");
$(".menu_item").css("overflow","visble");


});

</script>
<![endif]-->