Internet Explorer Z-Index Bug

In IE7  #header is displaying behind #background but should be displaying *above* #background. The stacking order is, I believe, correct. Works fine in IE8 and FF but I'm using a conditional style sheet for IE7.

Thanks for looking...
Who is Participating?
mreuringConnect With a Mentor Commented:
According to your IE specific stylesheet you want #background to display on top of #wrap. The rules concerning z-index officially ignore the z-index of the elements contained inside #wrap when comparing them to #background since they are at a different hierarchical stacking level :) I know, this is the stuff of head-aches and I believe most browsers these days ignore hierarchical stacking when applying z-index, not sure though...

I would add the attached lines of code to your conditional stylesheet, it should help, although I'll be honest, I didn't feel like firing up my VM to test it ;) It should work, really, the theory is sound!


/*Preferred method, might kill absolutely positioned elements*/
#wrap {
  position: relative; /*non-positioned element can never be z-indexed on top of positioned ones, in theory*/
  z-index: 3;

/*Alternative method, is a bit of a hack, but could work*/
#wrap {
  zoom: 1; /*Apply 'hasLayout', the magical IE property*/
  z-index: 3;

Open in new window

IE is known to have some bugs with positioning and z-index.

If you have the #header and #background within a container, try giving this container a z-index:1
manicsquirrelAuthor Commented:
Nice. Turns out the css you provided wasn't necessary; your explanation of the stacking hierarchy was something I didn't know. I just moved the header out of #wrap and everything fell into place. Thank you :D
Good to know my elaborate explanations sometimes make for better solutions than the fixes :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.