Geek Answers Handbook

IE8: after z-index

I saw examples of examples for fixing IE8 z-index madness, but none of them help me in this case.

I am developing a breading model based on UL / LI, where graphically each pack can have one of three different background colors, and each of them has a "slanted end cover". Here's what it looks like in everything except IE8:

enter image description here

Our initial naive but working implementation adds non-semantic markup between breadcrumbs with images of each possible match pair - when changing tiny classes, there are 9 combinations selected with a complex series of classes and JS. Ugh. I wanted to take a hit in another solution based on pseudo-elements that overlap the crumb to the right, so that we can drop all the “dividers” 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 will not bore you with registration and background and the like, suffice it to say that each of the backgrounds is a tape that repeats - by default (without a class) gray, positive - green, negative - red. For each default / positive / negative, there is a tilt image.

Here are 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; }

It gives me my crumbs with the right colors. Now for tilts:

    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 baby "chooses" the right bias based on its class. it overlaps the crumb to the right, so I have to make room for the slope in order to "cover" part of it:

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

All this works, with the exception of IE8:

enter image description here

The: , , . , IE8 " z-index", , li : . , li, , z-index "" .

z-index IE8 ?

+5
2

jQuery:

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) });
});
0

, , IE 566462 ( ​​ IE9).

, SPAN JS , CSS- (:after ):

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 {/* ... */}
+6

More articles:


All Articles