IE7 maddeningly displaying columns under a div instead of over it

Question

If you view this page in IE7: http://65.60.10.2/~marionin/ , why are the light purple headers ("Spotlights", "Serendipity Projects", "Marion Institute Blog") hiding underneath the dark purple band?

I have firebugged till my fingers hurt, but I can't figure it out. The column divs are written after the block div, so they should display on top. Mucking about with the z-index doesn't help, even when setting the positions of the block and the columns to relative.

[Of course, as would be expected, everything looks fine in Firefox, Safari, Opera, and Chrome.]

Thanks for any help!

Answer 1

IE has terrible z-index bugs that are often impossible to grok. I was able to make it behave in IE 7 after some fiddling with the IE developer toolbar.

I noticed that for some reason many elements had z-index defined on them yet these weren't appearing in the HTML. Do you have a script running that is setting any z-indexes? I noticed that they were in reverse order, meaning that the high level elements had higher z-indexes than the lower level elements. This is one way to create numerous bugs in IE. The deeper the HTML appears in the hierarchy, the higher its z-index should be.

I started by removing the z-index on the relevant containers, from body down to the two <div>s in #main-content. I set position: relative on #main-content but left z-index undefined. I set position: relative on the two <div>s in #main-content and set the z-index to 100 and 200 respectively.

Within #content, the first <div>, I added z-index: 110 and the second <div> (the row of blocks with small pictures) I added z-index: 120.

That seemed to get IE 7 to behave correctly.

If there is anything else that has a z-index defined that I didn't mention, try removing it and starting from the ground up. The less elements there are with z-index defined, the less opportunity there is for IE to behave badly.

Answer 2

#block-block-11 {
    position: static;
}

...quick fix to a larger issue eloquently detailed by CalebD.