CSS HasLayout IE7 Bug - Tried Zoom and overflow hidden

Question

Problem I have tried many things to get the position: relative / absolute / fixed working in IE7. I can not work this out now.

.levelTwo is the element that has pos: ab and .levelOne is element that has pos: rel.

So the desired outcome will be any .levelTwo elements to be above/infront of any other elements. Currently they are sitting behind .levelOne a

Markup

    <!-- Bof Level One-->
    <ul class="levelOne">
        <li><a href="#">Basic IT Access <span>&#9658;</span></a>
            <div class="levelTwo">
                jamie
            </div>
        </li>
    </ul>

CSS

.levelOne {
    border-top: 1px solid #DDD;
    list-style: none;
    position: relative;
}

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 170px;
    z-index: 10;
    /*tried*/
    display: inline-block;
    *zoom:1;
    overflow:hidden
}

Desired

Desired

Broken

Broken

Heres my fiddle: http://jsfiddle.net/hutber/2GvA4/

You should probably describe what you want it to look like, and what it looks like (erroneously) in IE7. — Pointy, Feb 19 '13 at 15:16
good shout, although if you could see if in IE7 you would see clearly the z-indexs aren't working correctly. — Jamie Hutber, Feb 19 '13 at 15:19
I have IE8, IE9, and IE10 available. IE7 is in the bin. If you want help with IE7, screenshots or detailed descriptions may help get more folks involved. — isherwood, Feb 19 '13 at 15:23
Thanks. I never wanted to think about `hasLayout` again, and you've ruined my day. — Ryan Kinal, Feb 19 '13 at 15:27
haha! tell me about it, I haven't had to develop for IE7 since I last tried to kill myself. Still working with sharepoint and a big corp does that to you. — Jamie Hutber, Feb 19 '13 at 15:28
@JamieHutber Can you please make a [fiddle](http://jsfiddle.net)? I am ready to make my hands dirty for this! :P — Praveen Kumar Purushothaman, Feb 19 '13 at 15:30
http://jsfiddle.net/hutber/2GvA4/ it was hidden at the end of the question. Thinking i might upload it somewhere, the fiddle won't open in ie7 :p — Jamie Hutber, Feb 19 '13 at 15:36
the firewall here means i can't ssh or ftp into my server :( Maybe save it in a html file and work locally :p i loveee youu!! — Jamie Hutber, Feb 19 '13 at 15:48

score 3 · Accepted Answer · answered Feb 19 '13 at 17:38

Try the below css rules you problem will solve

CSS:

.head0 .levelOne li { z-index:60; }
.head1 .levelOne li { z-index:50; }
.head2 .levelOne li { z-index:40; }
.head3 .levelOne li { z-index:30; }
.head4 .levelOne li { z-index:20; }
.head5 .levelOne li { z-index:10; }

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 162px; /* reduced the width here */
    display: block;
    z-index: 10;
}

Screen Shot:

enter image description here

Reference Links:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.satzansatz.de/cssd/onhavinglayout.html#rp

CSS HasLayout IE7 Bug - Tried Zoom and overflow hidden

1 Answers1