I need some help figuring out a solution to a z-index problem with ie7. Works fine in firefox.
I’ve read other posts, but for some reason the suggestions that worked for them are not working for me. I’m hoping someone can look at my code and point out where the problem is.
See the image below. please excuse the blurr…client doesn’t want info displayed.
The top section (grey) is a “div” with 2 ul’s in it, one for the bullet text, one fir the image thumbnails. The bottom section is identical to the top, only its colored white.
In the top section I have 3 images, when “hovered” over with mouse display a larger image. As you can see, the larger image is behind the next section (white) images and it should be on top of it.
I’m assuming the problem is somewhere in the jquery z-index, but I really don’t know.
How can I fix this? Thanks for your help.
HTML:
<body>
<div style="position:relative;width:1000px;">
<!-- Main Content -->
<h2 class="h2_pad_me">Feature Details</h2>
<div class="light pad_me">
<h3>asdf</h3>
<p>asdf</p>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<h4>asdf:</h4>
<div>
<ul class="thumb_standard">
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
</ul>
</div>
<div class="clear_both"></div>
</div>
<div class="light pad_me">
<h3>asdf</h3>
<p>asdf</p>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<h4>asdf:</h4>
<div>
<ul class="thumb_standard">
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
</ul>
</div>
<div class="clear_both"></div>
</div>
</div>
</body>
CSS:
<style>
ul.thumb_standard {
/*float: left;*/
list-style: none;
margin: auto;
padding: 10px;
width: 900px;
position:relative;
}
ul.thumb_standard li {
margin: 0;
padding: 5px;
float: left;
width: 210px;
height: 110px;
position: relative;
z-index:-1
}
ul.thumb_standard li img {
position: relative;
width: 200px;
height: 100px;
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
}
.clear_both{clear:both;}
.light{ background-color:#FFFFFF;}
.pad_me{padding:5px 15px 0px 15px;}
</style>
Jquery for the animated popup:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.thumb_standard li").hover(function() {
$(this).css({'z-index' : '1000'}); /*Add a higher z-index value so this image stays on top*/
var li = $(this);
var img = li.find('img');
var div = li.closest('div');
// Add hover class and stop animation
li.addClass('hover');
img.stop(); /* Stop animation queue buildup*/
// Find the position relative to the div
var new_width = 700;
var new_height = 500;
var new_left = (div.width() - new_width) / 2;
var new_top = (div.height() - new_height) / 2;
// Find the position relative to the li
var li_offset = li.position();
new_left -= li_offset.left;
new_top -= li_offset.top;
img.animate({
top: '-100%',
left: new_left + 'px',
width: new_width + 'px',
height: new_height + 'px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '-1'}); /*set z-index value back*/
var li = $(this);
var img = $(this).find('img');
var div = $(this).parent('div');
// Remove hover class and stop animation
li.removeClass("hover");
img.stop(); /* Stop animation queue buildup*/
var new_width = 210;
var new_height = 110;
img.animate({
top: '0px',
left: '0px',
width: new_width + 'px',
height: new_height + 'px'
}, 400); /* this value of "400" is the speed of how fast/slow this hover animates */
}); //Closes .hover()
}); //Closes .document()
</script>
never could figure this out…had to make the pictures smaller and the problem didn’t show up anymore.