Menu overlap in IE7 despite z-index

HTML & CSS
1

Hi,

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

http://afghanian.com/en/

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.

Mac

2

Just read this :slight_smile:

3

Paul,

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.
Mac

4

Hi,

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.

e.g.


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