0

I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index. You can see the page here and view it in IE7 using netrender.

I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?

Brigand
  • 84,529
  • 20
  • 165
  • 173
Joshua Bambrick
  • 2,669
  • 5
  • 27
  • 35
  • I tried and it looked the same for me in both chrome and IE7, why don't you paste the specific code you are debugging here for better response to your question – footy Dec 24 '11 at 17:33
  • It's not just you, IE7 has a severely borked implementation of z-index. I can't remember the fix at the moment, but I recall it having something to do with setting the z-index in reverse order for each element. It was something really awful like that. If you can show your code (try http://jsfiddle.net as well) someone can figure it out. The problem with linking to live sites it that as soon as you fix it or start fiddling with it, the issue is gone. – Wesley Murch Dec 24 '11 at 17:34
  • It doesn't answer your question, but `.blackBg` should be `position: fixed` instead of absolute. – Brigand Dec 24 '11 at 17:40
  • I did have it as position fixed but changed it to fix an issue with how the div was positioned on the page. I have now fixed that and changed it back to fixed which makes more sense - thanks for pointing that out – Joshua Bambrick Dec 24 '11 at 18:10
  • I thing you should read this [IE 6 & IE 7 Z-index](http://stackoverflow.com/a/3998006/859324) it helped me :) – riso Dec 24 '11 at 17:42
  • Nice link. That's really relevant here considering I didn't see any static elements on that page (everything relative or absolute). – Brigand Dec 24 '11 at 17:46

2 Answers2

2

I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.

ppeterka
  • 20,583
  • 6
  • 63
  • 78
gotohales
  • 3,665
  • 1
  • 20
  • 34
0

As far as I am concerned, it is not possible so I gave up in the end.

Joshua Bambrick
  • 2,669
  • 5
  • 27
  • 35