Drop down menus behind content in IE7

Symptom:

Dropdown menus appear behind content in the div below even if z index is set higher.

Conditions:

CSS based dropdown menus viewed in IE7

Solution:

This occurs when the div containing the menu is separate from the div containing the content below. IE7 resets the z index for the separate divs. Adding “position: relative;” to both and a zindex to the div containing the menus that is higher thatn that for the content div will solve this.

/*Set zindex of first div to be higher than div below so that
all zindex statements for elements in the first div are respected.
#navWrapper {
position:relative;
z-index:10;
}
#contentWrapper{
position:relative;
z-index:1;
}

4 Comments

  1. Chris Taylor on October 31, 2012 at 4:37 am

    Nice post thanks. Your solution just worked :).

    Chris

  2. Yogi Liman on January 16, 2013 at 5:28 am

    It does not work on mine. I am not sure what I did wrong. I used z-index instead of zindex. Thank you though.

    • babbler on January 16, 2013 at 8:31 am

      You are right about the z-index. I have updated the post to reflect this.

      Can you give me a link to the site so I can have a look for you.

      • Yogi Liman on August 27, 2013 at 8:39 pm

        Sorry that it took me awhile to respond, but I have found the answer. It was a mistype on my part.

        Thank you for your help Babbler!

Leave a Comment