CODEWITHSUNDEEP
cssinternet-explorer-8z-indexpseudo-element
graygilmore
graygilmore

Reputation: 1768

IE8 Z-Index with Before and After Pseudo Elements

I am struggling trying to figure this one out. I have an article that has two elements being inserted :before and :after it that are both being positioned absolutely within that article.

In all browsers except IE8 the z-index stacking is working perfectly. It should go in this order from bottom to top:

Article Content > Fade Out Image > Icon

I have already tried a few different things, the latest of which can be seen here: http://jsfiddle.net/LtYMV/2/

A basic run down of what I'm trying looks like this:

article {
    // styles
}

article:before {
    // icon background image used on inserted content
}

article:after {
    // background image used on inserted content
}​

I know there is some sort of trick to this I just can't seem to figure it out with any combination of z-index values. Help appreciated!

Upvotes: 4

Views: 4299

Answers (1)

magnusdahlstrand
magnusdahlstrand

Reputation: 51

IE8 is weird when it comes to pseudo elements and z-index. There's a bug that make child elements kind of inherit (without being able to overwrite) the parents' z-index. You can read more about IE8 and z-index on quirksmode.

I changed your fiddle a bit to work the same way as your example in standards compliant browsers and to work alright in IE8, but without the fade in IE: http://jsfiddle.net/LtYMV/8/, although with the icon under the text.

I also created a version where it's using another element for the icon (with the class "icon", just after each ".post" element). It still hasn't got the fade for IE8, but the icon is over the text: http://jsfiddle.net/LtYMV/7/, so it's a slight improvement from the previous one.

Hope this helps!

Upvotes: 4

Related Questions