z-index css Casella pop-up e ie7

Question

Ho alcune caselle div che dovrebbero mostrare una casella vocale quando si passa il mouse. Con jQuery e CSS non è niente di troppo difficile.

Tuttavia, il discorso popup appare sotto il div vicino in IE7 - Non riesco a farlo apparire sotto di esso (vedere gli scatti).

Ho provato a giocare con z-index in punti diversi senza successo.

FF alt text http://img134.imageshack.us/img134/5314/63386894.png IE7 alt text http://img396.imageshack.us/img396/9329/95483890.png

HTML

<div class="boardshot_list"> 
    {% for ... %} 

    <span class="img_box"> 
     <a href="/site_media/xxx" target="_blank"> 
      <img class="trigger" src="xxx" alt="{{ item.title }}" /> 
     </a> 

    <div class="container_speech_box popup"> 
    <div class="two"> 
    <b class="tl"><b class="tr"></b></b> 
    <p> 
    blabla 
    </p> 
    <b class="bl"></b><b class="br"><b class="point"></b></b> 
    </div> 
    </div> 

</span> 


    {% endfor %} 

    </div> 

CSS

div.boardshot_list span.img_box { 
display:block; 
width:220px; 
height:180px; 
float: left; 
margin: 0 10px 10px 0; 
position: relative; 
} 
img.trigger{ 
border:1px solid #373743; 
} 
div.popup 
{ 
    display: none; 
    position: absolute; 
z-index: 50; 
} 

/* POPUP rounded box */ 
.container_speech_box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;} 
.container_speech_box div {width:300px; height:auto; font-family:verdana; font-size:11px;} 
b.tl {display:block; width:300px; height:8px; font-size:1px;} 
b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;} 
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;} 
b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;} 
b.point {display:block; font-size:1px; width:25px; height:14px;} 
.container_speech_box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;} 




div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;} 
div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;} 
div.two p {background:#fff;} 
div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;} 
div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;} 
div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;} 


/* end popup table */ 

div.boardshot_list { 
width: 700px; 
clear: left; 
min-height: 80px; 

} 
div.boardshot_list .memo_id { 
padding-left: 10px; 
position: relative; 
float:right; 
color:#60564d; 
font-size: 25px; 
padding-top: 20px; 
width: 50px; 
top: 30px; 
left: 10px; 
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif; 
} 

div.boardshot_list.even { 
background-color: #f3f5f6; 

} 

div.boardshot_list .title span{ 
color: #bbb; 
font-weight: normal; 
} 

div.boardshot_list .img img { 
border:1px solid #373743; 
} 

JS

<script type="text/javascript"> 
    $(document).ready(function(){ 

$('.img_box').each(function() { 
    // options 
    var distance = 10; 
    var time = 250; 
    var hideDelay = 50; 
    var hideDelayTimer = null; 

    // tracker 
    var beingShown = false; 
    var shown = false; 

    var trigger = $('.trigger', this); 
    var popup = $('.popup', this).css('opacity', 0); 

    // set the mouseover and mouseout on both element 
    $([trigger.get(0), popup.get(0)]).mouseover(function() { 
     // stops the hide event if we move from the trigger to the popup element 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     // don't trigger the animation again if we're being shown, or already visible 
     if (beingShown || shown) { 
     return; 
     } else { 
     beingShown = true; 
     // reset position of popup box 
     popup.css({ 
      top: -10, 
      left: 20, 
      display: 'block' // brings the popup back in to view 
     }) 

     // (we're using chaining on the popup) now animate it's opacity and position 
     .animate({ 
      top: '-=' + distance + 'px', 
      opacity: 0.9 
     }, time, 'swing', function() { 
      // once the animation is complete, set the tracker variables 
      beingShown = false; 
      shown = true; 
     }); 
     } 
    }).mouseout(function() { 
     // reset the timer if we get fired again - avoids double animations 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     // store the timer so that it can be cleared in the mouseover if required 
     hideDelayTimer = setTimeout(function() { 
     hideDelayTimer = null; 
     popup.animate({ 

      opacity: 0 
     }, time, 'swing', function() { 
      shown = false; 
      popup.css('display', 'none'); 
     }); 
     }, hideDelay); 
    }); 
    }); 
}); 


    </script> 

Answer 1

Penso che ciò sia dovuto a un errore z-index in Internet Explorer. Gli elementi posizionati (ad esempio, con un position diverso da static) stabiliscono il proprio contesto di impilamento.

http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

Nella mia esperienza, è come se tutta la vostra div.boardshot_list span.img_box hanno un z-index di 0, e gli elementi all'interno di ogni div.boardshot_list span.img_box hanno un z-index es di 0.1, 0.2 e così via, invece di 1 e 2.

Si dovrebbe essere in grado di risolvere il problema impostando lo z-index del span.img_box contenente il pop-up visibile a 1, in questo modo:

// reset position of popup box 
popup.css({ 
    top: -10, 
    left: 20, 
    display: 'block' // brings the popup back in to view 
}) 

$(this).css('z-index', '1'); 

Non dimenticare di ripristinare a 0 quando il pop-up scompare.

Answer 2

E 'probabilmente a causa del conflitto di classi moltiplicano (.container_speech_box and .popup) Risoluzione stile in diversi browser. Prova a racchiudere .popup div attorno a .container_speech_box.