Question

I am trying to create a row of images and on hover – display more information about the item such as price and links to the item. On hover right now, the box containing more information (in yellow) is being displayed correctly on Chrome, Safari, Firefox, and IE 8. However, in IE 7 the image of the product (blue background) is displaying over the box (yellow) that should be displayed. It is a little hard to explain so check out the link: http://jsfiddle.net/ryanabennett/bFZDL/27/. Here is an image how the finish product should look like: http://www.flickr.com/photos/61208628@N07/5937560243/in/photostream. Again this works fine in IE 8 and 9 but not IE 7 and I can’t seem to figure out what I am missing.

Here is the HTML:

<div class="productbox">
 <div class="livitem">
  <div class="Livwidgetexpandimg">
   <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
  </div>
 </div>
</div>
<div class="productbox">
 <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
         <div class="popup"></div>
    </div>
   </div>
</div>

Here is the CSS:

.productbox{
float: left;
height: 150px;
margin-left: 5px;
/*overflow: hidden;*/
position:relative;
}

.livitem{
float: left;
position: relative;
top: 3px;
}

.livitem:hover{
background: yellow;
}

.livitem:hover .popupbox {
position:absolute;
top:15px;
left:15px;
z-index:51;
}

.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}

.popupbox{
border: medium none;
height: 75px;
width: 75px;
}

.popup{
background: yellow;
display: none;
float: left;
/*height: 122px;*/
/*margin-left: -10px;*/
opacity: 0;
/*width: 175px;*/
z-index: 50;
height: 106px;
width:230px !important;
position:absolute;
top:0;
left:0;
}

Here is the Jquery:

$(function () {
    $('.livitem').each(function () {
        var distance = 10;
        var time = 200;
        var hideDelay = 1;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.Livwidgetexpandimg', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: 10,
                    left: -3,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
   });

Hopefully you can help me figure this out. I know I am just missing something small but I can’t seem to figure it out. Thanks in advance.

Answer 1

IE7 has known bugs with z-index, see: IE7 Z-Index issue – Context Menu

In this specific instance, one way to fix it is to add this CSS:

.productbox:hover {
    z-index: 9999; /* arbitrary high number */
}

See in IE7: http://jsfiddle.net/bFZDL/28/