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..

    How to edit ol tags in rich text editor

    CSS: How to do image change on rollover

    How do I execute a LESS guard when a boolean is not true?

    How to scrape a live java script webpage in R?

    How to have a color change animation on a button outline?

    How to make font-size less for 2px than parent element?

    How to style the

    How to upgrade web project with latest fancy Bootstrap & SASS

    Show tooltip content when its hovers

    How to set each type of page transition to a specific page? (css animations)

    How to give the padding for option with css only

    how to simplify font import in css

    css: column-count property - how to modify it with css to modify the number of items in each column?

    HTML/CSS - How to make text-overflow in line with each other?

    How do I add an image to a progress bar in HTML/CSS?

    How to move items left and right in an html table using css? -

    How to style 3 (div) boxes using CSS

    How can I put a inside of an ? [duplicate]

    How would you style this html so that everything falls into a table?

    How to remove shadow from slider backround using Html/Css?

    How to import css dynamically with js?

    How to make a rollover div clickable?

    How to append a CSS rule to the another CSS rule

    How can I add interactive content to a Bootstrap popover?

    How to position main content below header and footer in css

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    How to make input+label in a form appear one by one?

    how can I center button below my text while using bootstrap css?

    How to move a span to a different position in a DIV

    how to do 3d menu in css 3 with that effect like on page [closed]