IE8 z-index on before and after css selectors

Question

This is very frustrating....

http://jsfiddle.net/RRnm8/

works well on every browser, except for IE8...

it should be displayed like this:

correct version http://f.cl.ly/items/4410273m1G1m1O2U0K0a/Screen%20shot%202011-04-04%20at%2016.40.54.png

But in IE8 you get this :'(

wrong version http://f.cl.ly/items/2e351L0G3y2H1O1g1a1L/Screen%20shot%202011-04-04%20at%2016.41.41.png

So the question would be how to get this to work properly in IE8?

Please provide the answer as a real working example at jsfiddle...

This buddy has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle

Thanks in advance :)

Answer 1

This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.

I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.

The solution is to make an inner div, or give the p element relative positioning and styling.

See: http://jsfiddle.net/RRnm8/3/