Dropdown nav bar hiding behind content in IE7

Question

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

Try replicating your issue on jsfiddle.net. I don't have IE7, so I can't help you this way. — Cthulhu, Aug 14 '12 at 17:26
@Cthulhu If you have IE8 you can use developer tools to run the browser in the IE7 engine. Not sure what IE9 offers in this regard. I'll see if I can come up with something on jsfiddle. — Brett, Aug 14 '12 at 17:54

Chris · Accepted Answer · 2012-08-14T19:21:52.300

2

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]-->

edited Aug 14 '12 at 19:21

answered Aug 14 '12 at 17:54

Chris

26,544
5
58
71

Could you give me an example of where to add it? I'm not a big JS person. – Brett Aug 14 '12 at 18:03
@Brett In line 30-31 in your index page (not sure what line that is in the original PHP sourcecode), you have: ` – Chris Aug 14 '12 at 18:08
Just looking; is there a cleaner way to do it than that. Looking now every element in my page seems to have an inline style applied to it for z-index and stuff in my footer ends up with z-indexes of `-930` etc – Brett Aug 14 '12 at 18:38
@Brett Not one that I know of. The problem is that IE7 seems to have an issue with recognizing element stacks, for some reason. Seems you'll have to do a "hack" anyway. Sorry. – Chris Aug 14 '12 at 18:45
Guess I'll just do my best to keep this hack to IE7 only so it doesn't get all messy for other browsers. – Brett Aug 14 '12 at 18:51
Can I separate this code from the other handler? I ask because then I can only call it for IE7. Like was there a reason why you said to put it inside that handler? – Brett Aug 14 '12 at 19:18

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

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;
}

edited May 23 '17 at 11:56

Community

1
1

answered Aug 14 '12 at 18:14

Stano

8,749
6
30
44

Yep, I saw your post before I posted mine but couldn't get it to work. I also use a reset.css already and even tried using the margin/padding thing directly on the li class for them but it didn't work, so not sure why I'm getting the spacing. IE is fun :) – Brett Aug 14 '12 at 18:23

Dropdown nav bar hiding behind content in IE7

2 Answers2