z-index in IE7 not rendering properly

Question

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?

Answer 1

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.

Answer 2

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