IE8 :after z-index

Question

I have seen oodles of examples to fix IE8's z-index insanity but none of them seems to help me in this case.

I am styling a UL/LI-based 'breadcrumb' layout where graphically each breadcrumb can have one of 3 different background colors and each one has a 'slanted end-cap.' Here's how it looks in anything but IE8:

Our initial naive-but-working implementation adds non-semantic markup between breadcrumbs with images of each of the possible overlap pairs - there are 9 combinations selected with a complex series of classes and JS when crumb-classes change. Ugh. I wanted to take a stab at another solution based on pseudo-elements that overlap the crumb to the right so we can ditch all the 'divider' stuff and logic.

My HTML looks like this:

<ul class="breadcrumbs">
    <li class="positive">positive</li>
    <li>default</li>
    <li class="positive">positive</li>
    <li class="negative">negative</li>
    <li>default</li>
</ul>

I won't bore you with the padding and background and such, suffice to say that each of the backgrounds is a sliver that repeats - default (no class) is grey, positive is green, negative is red. For each default/positive/negative there is an image of a slant.

Here's some CSS:

    ul.breadcrumbs
    {
        display: block;
        clear: both;
        position: relative;
        z-index: 10;
    }
    ul.breadcrumbs li
    {
        display: block;
        float: left; 
        position: relative;
        ...height,width,padding,etc.etc...
        background: url(sprite-x.png) repeat-x 0 -216px;
    }
    ul.breadcrumbs li.negative { background-position: 0 -243px; }
    ul.breadcrumbs li.positive { background-position: 0 -323px; }

That gives me my crumbs with the right colors. Now for the slants:

    ul.breadcrumbs li:after
    {
        content: "";
        display: block;
        position: absolute;
        top: 0; left: 100%;
        width: 24px;
        height: 100%;
        z-index: 1;
        background: url(sprite.png) no-repeat 0 -783px;
    }
    ul.breadcrumbs li.negative:after { background-position: 0 -864px; }
    ul.breadcrumbs li.positive:after { background-position: -25px -864px; }

This works great - each crumb 'picks' the right slant based on its class. it overlaps the crumb to the right so I have to make room for the slant to 'cover' part of it:

    ul.breadcrumbs li+li:before
    {
        content: "";
        display: block;
        float: left;
        width: 22px;
        height: 100%;
    }

All this works a treat, except for IE8:

The :after content is BEHIND the crumb to the right. I understand there is some 'resetting z-index' weirdness in IE8 having to do with positioned elements, but I HAVE to position the li's or the absolute positioning of the :after's won't work. I also won't know how many li's there might be, and I don't know what z-index it will be 'living' in on the pages.

What magic z-index incantation will make IE8 happy?

Answer 1

This is probably related to IE's bug 566462 (fixed in IE9).

I usually workaround this bug by adding empty SPAN elements with JS and attaching it with same styles as CSS-generated content (:after in your case):

ul.breadcrumbs > li:after,
ul.breadcrumbs > li > SPAN {/* ... */}

ul.breadcrumbs > li.negative:after,
ul.breadcrumbs > li.negative > SPAN {/* ... */}

ul.breadcrumbs > li.positive:after,
ul.breadcrumbs > li.positive > SPAN {/* ... */}