ie7 z-index bug... having trouble fixing.

Question

I have 2 columns (several rows) of divs like this:

<div class="odd">
    <div class="desc"></div>
</div>
<div class="even">
    <div class="desc"></div>
</div>

the odd and even classes are positioned relatively with z-index of 1 and the desc classes are positioned absolutely with a z-index of 5. Its set so that the desc inside the odd overlaps the even to the right, and the desc inside the even overlaps the odd to the left.

This works fine except in ie7. the desc from the odd is showing as under the even. I tried several things and the only solution I came up with just inverted my problem I set odd to a z-index of 2 and even to a z-index of 1 but then the desc from the even hides under the odd.

I hope this makes sense. I am basically showing products, when you hover over the image a description pops up to the side (over the product next to it, left or right for even or odd). Its working fine except for ie8.

Is there a fix?

update

here is the css:

.even, .odd
{
    padding:5px;
    width:332px;
    float:left;
    position:relative;
}

.desc
{
    height:300px;
    padding:5px;
    position:absolute;
    top:30px;
    z-index:5;
    width:300px;
    visibility:hidden;
}

.even:hover .desc, .odd:hover .desc
{
    visibility:visible; 
}

.even:hover .desc:hover, .odd:hover .desc:hover
{
    visibility:hidden;  
}

.even .desc
{
    right:100%;
}
.odd .desc
{
    left:100%;  
}

Answer 1

The parent z-index always takes precedence over its child's index. This is the official W3C definition of the behaviour. So it really doesn't matter if your desc1 and desc2 have 10 and resp. 400 as z-index value as long as your odd class have 1 and even has 2, even always will be on top.