ie6&7 z-index problem

Question

I'm having a bit of difficulty with css z-index property in ie 6 & 7. I've got a list of "boxes" with a popup div appearing when you roll over the "box" (using jquery) but in ie6 & 7 the popup appears under the box below. Could someone tell me what I'm doing wrong and why? Here's my css:

#trainingModules
        {
            width: 250px;
            height: auto;
            padding: 0;
            margin: 0;    
            font-family: Arial;
        }

        #trainingModules li
        {
            list-style: none;
            float: left;
            position: relative;
            width: 200px;
            height: 180px;
            margin: 5px 15px 10px 15px;
            cursor: pointer;
        }
        #trainingModules li .mod
        {
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        #trainingModules .modTitle  { width: 100%; height: 32px;}
        #trainingModules .modBody
        {
            border: 4px solid #e5e5e5;
            width: 192px;
            height: 132px;  
            position:relative; 
        }
        #trainingModules .mod .modBody .bestScore  
        {
            font-size: 20px;
            color: red;
            position: absolute;
            top: 5px;
            left: 5px;
        }
        #trainingModules .mod .modBody .bestScore span { 
            font-size: 10px; 
            line-height:20px; 
            vertical-align: top; 
        }
        #trainingModules .modBody .moduleDescription 
        {
            position:absolute;
            top: 132px;
            left: -4px;
            color:White;
            background-color: Black;
            z-index: 100;
            width: 190px;
            padding: 5px;
        }

My jQuery:

$(document).ready(function() {
        $('#trainingModules li').hover(function () {
                $(this).find('.moduleDescription').show();
            },
            function () {
                $(this).find('.moduleDescription').hide();
            });
  });

My html:

<ul id="trainingModules">

    <li>
        <div class="mod">
            <div class="modTitle">
                <div class="stateIcon"></div>
                <a class="moduleLaunchLink" href="somelink">Some Name</a>
            </div>
            <div class="modBody">
                <div class="bestScore">93<span>%</span></div>
                <div class="moduleDescription" style="display:none;">
                    blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
                    blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="mod">
            <div class="modTitle">
                <div class="stateIcon"></div>
                <a class="moduleLaunchLink" href="somelink">Some Name</a>
            </div>
            <div class="modBody">
                <div class="bestScore">93<span>%</span></div>
                <div class="moduleDescription" style="display:none;">
                    blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
                    blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah
                </div>
            </div>
        </div>
    </li>

</ul>

Thanks.

In IE always start with `z-index: 1;` as it has problems with 0. — Kyle, Mar 15 '11 at 10:08
If you still can't figure it out by using the good advice already given, you need to post a link to your site. I'm [good](http://stackoverflow.com/questions/5306412/sub-nav-doesnt-appear-over-the-image-in-ie7/5306445#5306445) at figuring this bug out. — thirtydot, Mar 15 '11 at 10:15
Interesting, I didn't know that. Where I've got z-index: 0 I replaced with z-index: 1 and it still doesn't work. — Matt27, Mar 15 '11 at 10:15
Here's a link to a test document with the problem http://dat.a2om.com/test.html Any help would be much appreciated — Matt27, Mar 15 '11 at 10:18

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

IE6 had a known z-index bug. There are workarounds.

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Internet Explorer z-index bug?

edited May 23 '17 at 12:11

Community

1
1

answered Mar 15 '11 at 10:00

SpliFF

38,186
16
91
120

score 0 · Answer 2 · answered Mar 15 '11 at 10:31

0

IE's z-index issues can usually be resolved by messing around with setting position:relative (or position:absolute) on the affected element and its parents.

(Generally you'd use position:relative; if you actually want to position stuff absolutely, you'd already have specified it)

It's a fairly well known issue; there's lots of sites with details of how to work around it.

answered Mar 15 '11 at 10:31

Spudley

166,037
39
233
307

Good advice, thats what I've been trying without success – Matt27 Mar 15 '11 at 10:41

ie6&7 z-index problem

2 Answers2