z-index css Pop-up box et ie7

Question

J'ai quelques boîtes div qui devraient afficher une boîte de dialogue en vol stationnaire. Avec jQuery et CSS, rien n’est trop difficile.

Cependant, le message contextuel apparaît sous le div du voisin dans IE7 - je ne peux pas le faire apparaître sous celui-ci (voir les prises de vue).

J'ai essayé de jouer avec z-index à différents endroits sans succès.

FF texte de remplacement http://img134.imageshack.us/img134/5314/63386894.png IE7 texte de remplacement 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

Je pense que cela est dû à un bogue z-index dans Internet Explorer. Les éléments positionnés (c'est-à-dire les éléments avec un position autre que statique ) établissent leur propre contexte de pile.

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

D'après mon expérience, c'est comme si tous vos div.boardshot_list span.img_box avaient un index z de 0 , et des éléments à l'intérieur de chaque div.boardshot_list span.img_box a un z-index es de 0.1 , 0.2 et ainsi de suite, au lieu de 1 et 2 .

Vous devriez pouvoir résoudre le problème en définissant l'index z de la span.img_box contenant la fenêtre contextuelle visible sur 1 , comme suit:

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

N'oubliez pas de le réinitialiser sur 0 lorsque la fenêtre contextuelle disparaît.

Answer 2

Cela est probablement dû au conflit de multiplications de classes ( .container_speech_box et .popup ) dans différents navigateurs. Essayez d’enrouler .popup div autour de la .container_speech_box.