Z-index css Pop-up box y ie7

Question

Tengo algunos cuadros de div que deberían mostrar un cuadro de voz cuando se desplaza. Con jQuery y CSS no es nada difícil.

Sin embargo, el mensaje emergente aparece debajo del div vecino en IE7. No puedo hacer que aparezca debajo de él (vea las tomas).

Intenté jugar con el índice z en diferentes lugares sin éxito.

FF texto alternativo http://img134.imageshack.us/img134/5314/63386894.png IE7 texto alternativo http://img396.imageshack.us/img396/932990.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

Creo que esto se debe a un error z-index en Internet Explorer. Los elementos posicionados (es decir, los elementos con una posición que no sea static ) establecen su propio contexto de apilamiento.

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

En mi experiencia, es como si todos sus div.boardshot_list span.img_box tuvieran un índice z de 0 , y elementos dentro de cada div.boardshot_list span.img_box tiene un z-index es de 0.1 , 0.2 y así sucesivamente, en lugar de 1 y 2 .

Debería poder solucionar el problema configurando el índice z de span.img_box que contiene la ventana emergente visible en 1 , de esta forma:

// 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');

No te olvides de restablecerlo a 0 cuando desaparezca la ventana emergente.

Answer 2

Probablemente se deba a un conflicto de resolución de estilo de varias clases ( .container_speech_box y .popup ) en diferentes navegadores. Intente ajustar .popup div alrededor de .container_speech_box.