z-index css Pop-up box and ie7

Question

Hi,

I have some div boxes which should show a speech box when on hover. With jQuery and CSS it’s nothing too hard.

However, the popup speech appears under the neighbor div in IE7 — I can not make it to appear under it (see the shots).

I tried to play with z-index at different spots with no success.

FF IE7

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

It's probably because of conflict of multiply classes (.container_speech_box and .popup) style resolution in different browsers. Try to wrap .popup div around the .container_speech_box.

Please also see this article.

Answer 2

I think this is due to a z-index bug in Internet Explorer. Positioned elements (i.e. elements with a position other than static) establish their own stacking context.

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

In my experience, it’s as if all your div.boardshot_list span.img_box have a z-index of 0, and elements inside each div.boardshot_list span.img_box have a z-indexes of 0.1, 0.2 and so on, instead of 1 and 2.

You should be able to fix the issue by setting the z-index of the span.img_box containing the visible pop-up to 1, like this:

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

Don’t forget to reset it to 0 when the pop-up disappears.