Z-Index Ie8 Bug on Generated Content with: After

IE8 z-index on before and after css selectors

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/

Z-index broken in IE8?

The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -140px; /*position where enlarged image should offset horizontally */
    left: -500px;
    z-index: 51;
}

z-index IE8 not working, while in FF it is

update the doctype

it will work fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

i tested on ie8

else you can press f12 and check your browser mode and document mode :-)

Fix z-index issue in IE8

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?

IE8 :after z-index

Here is a workaround using the jQuery library:

jsBin demo

CSS:

 ul li{
    position:relative;
    float:left;
    display:inline;
    font-family:Verdana, Helvetica, sans-serif;
    height:18px;
    padding:0px 34px 0 38px;
    margin-left:-33px;
    font-size:12px;
    background:url(http://i42.tinypic.com/zya52u.png) right top;
    color:#fff;
  }
  .positive{
    background-position:right -18px;
  }
  .negative{
    background-position:right -36px;
  }

jQuery:

var liLen = $('.breadcrumbs li').length;
$('.breadcrumbs li').each(function(i,e){
  $(this).css({'z-index' : '-'+(liLen+i) });
});

Negative :before z-index on absolutely positioned element not working in IE8

I've found a working solution:

Add a relatively positioned div inside the container
Set its z-index: -1
Add the :before element to the div not to the container.

Here's a fiddle http://jsfiddle.net/WaTnn/3/

If someone has a better solution, I'd be happy to see it.