Z-index problem with ie7 … working in firefox. Images showing behind other img's


Tags: jquery,css,internet-explorer,html-lists

Problem :

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.

alt text

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>


Solution :

never could figure this out...had to make the pictures smaller and the problem didn't show up anymore.


    CSS Howto..

    CSS - How to create a table cell with a two-colour background?

    CSS frustration: How to center floating images of different widths inside LI tags?

    How to fit the title to the entire page

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    How to not make text colored within a href link but the text is also within div?

    How to display a div over other containts of an html page?

    How to use add/subtract in css propert?

    How to scale a .svg being the background in a div?

    How to put two divs on the same line with CSS in simple_form in rails?

    How to hide first 3 childs of UL using CSS

    How Do I Place An Image To The Right of a Body of Text?

    How to vertical-align to x-height?

    How can I re-size Background Image to full Width of Window with CSS

    Example of how to load static CSS files from node_modules using webpack?

    How to use absolute position relative to parent element

    How to draw heart with text in middle?

    How to have a background image size (without affecting the div)?

    How to close the menu after click third layer menu item

    how to display div one by one using css

    How to make a custom clickable shape with CSS to cover the exact needed area?

    How to slide a DIV on link click

    how to place image on image?

    How can I add block colour to the CSS of my list?

    How to program a CSS3/JQuery/Flexslider carousel with visible sides

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How to optimize my css/html webpage? [closed]

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How can I create a horizontal selector in a form with only html and css?

    How to arrange div as a dock panel?

    Internet Explorer 10 menu item shows focus outline unexpectedly