IE8 z-index error

Question

I am trying to represent parent-to-child relation between some of my content, take a look HERE

In FF the black lines (CSS class : "subLevel" | z-index:-1 | representing relations) are under my boxes (CSS class : "case" | no z-index, even with '1' it does not work). Now I've got a problem with IE8, black lines are on top of everything...

I already look at some topics about it but did not found any useful answer.

NOTE: I'm also using PIE to produce beautiful round borders and some shadow. Don't know if it cause any problem with that.

CODE

HTML

<div id="relatedCases2">
    <div class="legend">
        <div class="legendUnit"><div class="statusIcon s_op"></div> <span>Open</span></div>
        <div class="legendUnit"><div class="statusIcon s_ip"></div> <span>In progress</span></div>
        <div class="legendUnit"><div class="statusIcon s_pe"></div> <span>Pending</span></div>
        <div class="legendUnit"><div class="statusIcon s_cl"></div> <span>Closed</span></div>
        <div class="legendUnit"><div class="statusIcon s_cr"></div> <span>Closed / Unresolved</span></div>
    </div>
    <div class="case">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl2">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
</div>

CSS

body {
    height: 1000px;
}

/* legend */
.legend {
    padding: 4px 4px 4px 2px;
    border: 1px dashed black;
    display: inline-block;
}

.legendUnit {
    height: 19px;
    display:inline-block;
    padding: 2px 3px;
    font-weight: bold;
}

.statusIcon {
    width: 1em;
    height: 1em;
    border-radius: 1em;
    behavior: url(/Content/PIE.htc);
    display:inline-block;
    border: 1px solid black;
    box-shadow: #000 0px 0px 2px;
}


#relatedCases2 .legend {
    line-height:1em;
    font-size:1em;
    vertical-align:middle;
}

.legend span {
    position: relative;
    top: -1.5px;
    margin-right:5px;
}

/* status types */

/* open */
.s_op { background: #FFF;}
/* in progress */
.s_ip { background: #FF0;}
/* pending */
.s_pe { background: #ff7500;}
/* closed */
.s_cl { background: #00d800;}
/* closed / unresolved */
.s_cr { background: #c24646;}


.case {
    margin-left: 10px;
    margin-top: 10px;
    padding: 5px;
    background: #90C2E0;
    border-radius:10px;
    width: 50%;
    box-shadow: #000 3px 3px 5px;
    behavior: url(/Content/PIE.htc);
}

.caseSum {
    display: block;
    /* margin */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    /* padding */
    padding: 2px 10px;
    /* color */
    background: #d3d3d3;
    /* font */
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1.6em;
    font-family:Calibri;
    text-shadow:rgba(0,0,0,.01) 0 0 1px;
    -webkit-font-smoothing: antialiased;
    /* shape */
    border: 2px solid black;
    box-shadow: #000 0px 0px 2px;
    border-radius:10px;
    behavior: url(/Content/PIE.htc);
}

.caseLabel {
    color: #333333;
    font-weight: bold;
}


.lvl1 {
    margin-left: 50px;
}
.lvl2 {
    margin-left: 90px;
}

.subLevel {
    position:absolute;
    display:inline-block;
    width:20px;
    z-index:-1;
    left:0;
    top:0;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

Javascript

var count1 = 1;
var count2 = 1;
$(".case").each(function () {
    if ($(this).hasClass("lvl2")) {
        $(this).data("index", count2++);
        count1++;
    } else if ($(this).hasClass("lvl1")) {
        count2 = 1;
        $(this).data("index", count1++);
    } else {
        count1 = 1;
        count2 = 1;
    }
});

$(".lvl1,.lvl2").each(function () {
    var offset = $(this).offset();
    var elHeight = $(this).outerHeight(true);
    var height = elHeight * ($(this).data('index') - 1);
    $(this).append("<div class=\"subLevel\" style=\"" +
        "left:" + (offset.left - 22) + "px;" +
        "top:" + (offset.top - elHeight / 2 - height) + "px;" +
        "height:" + (elHeight + height) + "px\"></div>");
});

Answer 1

Thanks to comments and link given, I found a solution. I'm sharing it, could help someone else.

It was a problem linked to PIE.

The solution is :

1. set the css attribute "position" to "relative" on elements with behavior:url([PIE_path]);
2. check & solve any positioning troubles in connection with this change

Here you are =)

Answer 2

If the problem is the PIE, you can try jquery corner for the border-radius : jquery.corner.js (http://jquery.malsup.com/corner/)

SOURCE : @sudip, Creating rounded corners in IE7 / IE8