CODEWITHSUNDEEP
cssinternet-explorer-7
Brett
Brett

Reputation: 20099

Dropdown nav bar hiding behind content in IE7

I have a dropdown nav bar and the when you hover over the items and the dropdown options appear in IE7 they are hiding behind the slider.

I have tried z-index with no luck. Additionally, there is some spacing under the menu button and the first option in IE7 as well. I haven't tried to fix that as yet, my main concern is getting it to display above the slider content.

You can see it here: http://www.condorstudios.com/stuff/temp/index.php

Upvotes: 0

Views: 907

Answers (2)

Chris
Chris

Reputation: 26918

Add this to your $(document).ready() handler:

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

In order to make sure this is only executed on IE7, add this outside your <script> tags, but in <head>:

<!--[if IE 7]>
<script type="text/javascript">
    $(document).ready(function() {
        var zi = 1000;
        $('*').each( function() {
            $(this).css('zIndex', zi);
             zi -= 10;
        });
    });
</script>
<![endif]-->

Upvotes: 2

Stano
Stano

Reputation: 8949

I solved this same problem recently here, so here are both fixes for IE7:

CSS:

/* show menu above content */
#nav li {
    display: block;
    position: relative;
    z-index: 1;         // force IE to recognize stack at this point
}

/* normalize layout, IE7 not makes this automatically */
body,ul,li {
    margin:0;
    padding:0;
}

Upvotes: 0

Related Questions