It is a grid structured content similar to this: \[code\]<div id="gridBlock"> <div class="list-lot-item"> <div class="list-lot-item-info"> <a href="http://stackoverflow.com/questions/13826454/#" 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>\[/code\]with some CSS like so (but more in JSFiddle):\[code\]#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;}\[/code\]where for each box "hover" state I apply a new "on" class with higher z-index:\[code\]$('#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");});\[/code\]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 ActionIE7 pops the hovered box under the neighboring grid boxes when it should be visa-verse. Any good suggestion how to fix it?
