Menu overlap in IE7 despite z-index


The navigation menu in this design goes under the livesupport button (the ss code of menu bar is in menu_style.css.

I have set z-index:200 for every single component of the menu (just to prove my case) and still it goes under the button. The button has a z-index:1 (<div id:bannerTeaser>).

Could someone please help with this issue?

I appreciate your help.


Just read this :slight_smile:


Thank you very much. I guess I could not solve this without getting help here.

I hate this try and error learning path in CSS. I need to find a good reference and learn more.

Thanks again.


Your #navbar isn’t positioned and therefore z-index won’t take effect as it only applies to positioned elements. You would need to add position:relative for it to be applied.

However it still won’t help you because navbar is contained within #header which has position relative set and ie6 and 7 mistakenly apply a z-index of zero to positioned elements when they should in fact be auto.

So as far as IE6 an 7 are concerned you need to address the positioned parents z-index before the stacking level of its children will be affected.


#header {
    min-height: 100px;
  [B]  z-index:200;