Fix z-index issue in IE8

Question

I am creating some CSS that will allow me to easily create a "breadcrumb"-like trail. Here is a fiddler where it renders correctly. Obviously, I'm having issues with the z-index bug in IE8 but I using the fix listed on this blog doesn't fix it. My structure is a little different but all the fix does is create the IE8 bug in all the other browsers lol.

Could anyone point me in the right direction of getting this to work in IE8 and keeping it working in other browsers? (< IE8 I don't care about).

I have already added the z-index property to the anchor and the parent li element but it made no difference, just broke it in the other browsers.

UPDATE Updated fiddle anwser

Answer 1

Well, the item that comes after will overlap the one before it by default: for example, in a list, the second item would be "on top of" the first one, if they were both positioned absolutely.

Second thing is, :after will always be positioned "on top of" (in terms of the z-index ) :before by default, so setting z-index on :before and :after to switch their natural positions is making extra work for yourself.

I think, therefore, that you should be able to get around the z-index issue in IE8 by placing the triangles not on the right of the breadcrumb item, but on the left: the second item's triangle creates the arrow for the first item, the third for the second, and so on.

Just add a :before and :after to the ul for the last item on this updated jsFiddle (if you want) and you should be good to go. jsFiddle isn't loading well for me in IE8, is anyone else able to check?