IE7 z-index problem

robcub

robcub

Junior Member
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.
 
Seems to be fine, just checked ie7 and its working ok, I assume you have fixed the problem?
 
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.
 
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.
 
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.
 
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.
 
You must log in or register to reply here.
Back
Top