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 - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?

    CSS: How to use Transform property on a bootstrap grid class

    How to make text appear at the top left corner?

    How to make CSS URL background images show up in localhost?

    How to create Curved & Overlapping Menu Tabs in CSS

    How to get minimal jQuery slideshow to slide properly?

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    How to toggle the sidebar menu for every browser size?

    How to write CSS code without using :not selector?

    how do you create tags like stackoverflow with text styling

    How browser auto resize website to mobile browse?

    How to make CSS columns in a div?

    How do i make div go under another div making columns

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How do let CSS change the inset shadow on li hover, instead of resetting it?

    Extjs: how Element's up/down functions work?

    How can I use the CSS pseudo-element :before{ content: '' } to affect an

    How to display last div at top using CSS?

    How to scale an entire webpage down to ipad or phone size

    How to override w3.css for table border

    how would you set up the GUI for a web-based board game structure?

    How to target content through css

    How can I use the HTML data attribute in CSS as a property? [duplicate]

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How can i give transparency effect in CSS?

    How to apply CSS only if class exists elsewhere in code?

    Always have my Image show in X percentage using CSS?

    How to dynamicaly change css style?

    How do i shrink my link menu

    How do I make the dropdown menu width the same as the tab size?