• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

IE7 z-index problem


robcub

Junior Member
#1
Hello, I've been tearing my hair out with this one.

Incredible English – Residential English School in Goa

I have a dropdown menu where the dropdown element is appearing behind the divs beneath it - in IE7. In all other browsers it's OK. I have tried setting different z-index's to all the other elements but it doesn't work.

I think the problem is to do with the position: relative settings to the divs I have underneath the dropdown menu.
 

robcub

Junior Member
#3
Wow, yeah - 5 seconds ago!

I applied z-index:1000 to the header div that contained the dropdown menu.

Thank you so much for looking into this for me. I'd tried everything on the smaller elements and the fix came on the larger containing div.

Thanks, Sunburn.
 

Sunburn

Active Member
#4
Hey Rob,

Good stuff, I was going to advise what you implemented anyways, typical solutions to z-index issues in IE and specifically ie7 rely on the parent container of the z-index'ed element having an higher z-index value then the child it contains.
Comeplely backwards to what you would expect, but its just how IE handles z-index.

Geoff.
 

Harry

Senior Member
#5
Remove #menu-box and apply its styles to #menu. See what happens then.

EDIT: D'oh, hadn't refreshed this page in ages.

But yeah if in IE7 you have a p with z-index 10, a div with z-index 5 and an image inside the div with z-index 1000000000 the p will still sit over everything else.

Also, as I said, remove the #menu-box and move its styles onto #menu.
 

robcub

Junior Member
#6
Thanks Sunburn, "typical solutions to z-index issues in IE and specifically ie7 rely on the parent container of the z-index'ed element having an higher z-index value then the child it contains" - I'll remember that.

Thanks for further clarification, Harry.