IE7 Content Overlap Ignoring z-index

Question

It is a grid structured content similar to this:

<div id="gridBlock">
  <div class="list-lot-item">
    <div class="list-lot-item-info">
        <a href="#" class="list-lot-item-col1"></a>
        <div class="list-lot-item-col2"></div>                       
        <div class="list-lot-item-col3"></div>
    </div>
  </div>
  <div class="list-lot-item">....</div>
</div>

with some CSS like so (but more in JSFiddle):

#gridBlock .list-lot-item{
 float:left;
 position:relative;
 height:25px;
 width:50px;
 border:1px solid #fff;
 padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
 display:block;
 position:absolute;
 background-color:#fff;
 border:1px solid #fff;
 width:50px;
}
#gridBlock .list-lot-item-info{
 z-index:199;
}
#gridBlock .list-lot-item-info-on{
 border:1px solid red;
 top:0;
 z-index:200;                            
 position:relative;
 background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}

where for each box "hover" state I apply a new "on" class with higher z-index:

$('#gridBlock .list-lot-item').hover(
  function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
  function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);

It works perfect, obviously, in FF, Chrome, IE8+ but our old little friend IE7 is weak. Please try in Compatibility Mode and see it:

Live Demo in Action

IE7 pops the hovered box under the neighboring grid boxes when it should be visa-verse. Any good suggestion how to fix it?

enter image description here

http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues — Matheus Azevedo, Dec 11 '12 at 18:54
Why you have written css for the same thing again and again..? makes the whole thing hard to read. — Praveen Puglia, Dec 11 '12 at 19:05

score 2 · Answer 1 · answered Dec 11 '12 at 19:01

I don't have access to any versions of IE to test this as I work on Ubuntu.

But, my understanding is that z-index depends on the position:absolute;

Try it out removing position:relative; from #gridBlock .list-lot-item-info-on If this happens to break your design, you could reset it with margins too.

score 1 · Accepted Answer · answered Dec 11 '12 at 19:08

Add this:

#gridBlock .list-lot-item:hover {
   z-index:200;   
}

Since IE7 is very strict with z-indices. Take your .list-lot-item they all have the same z-index value (which is nothing) so whichever come last are on top of the earlier ones. And they cannot break out of the order of the parents.

Take elements A and B, which have a z-index of 1 and 2 respectively, any child of A, no matter how high the z-index will appear under B. IE7/8 is very strict about this.

JSFiddle

This works. Thanks for explanations. Allow me to process it for my real world example. — Vad, Dec 11 '12 at 19:47

IE7 Content Overlap Ignoring z-index

2 Answers2