CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-7
halliewuud
halliewuud

Reputation: 2785

IE7 z-index wrong order

Check this jsFiddle.

In IE7 the code in the jsFiddle above displays the dropdown (.sbOptions) under the next selectbox element (.sbHolder).

.sbOptions has z-index: 100; but is still displayed under .sbHolder.

This works fine in all browsers except IE7, any idea how to solve this?

Upvotes: 2

Views: 208

Answers (4)

Salomonder
Salomonder

Reputation: 336

There is an error in IE7: Without setting z-index and as long as hasLayout is set to true, a stacking context is assigned to a positioned element. Width and height of .sbHolder are such hasLayout triggers. Therefore, the second .sbHolder is at the top.

IE7 changes your rule to:

.sbHolder {
    position: relative;
    width: 130px;
    height: 30px;
    display: block;
    margin-bottom: 20px;
    z-index: 0; /* ! */
}

This ruins your plan to increase .sbOptions z-index since .sbOptions is catched by the irregular stacking context of .sbHolder.

I've got a solution for IE <=7 in that only one .sbOptions is dropped down at the time. Does this come up to scratch? Let's hope so!

Have a go: http://jsfiddle.net/HRubx/

The irregular stacking context is now produced if required:

li:hover {
    position: relative;
}

Upvotes: 1

Vin&#237;cius Moraes
Vin&#237;cius Moraes

Reputation: 3516

Hey bro if you can't change your mark-up alot, just add z-index in the parent's div like above:

<div class="sbHolder" style="z-index:11">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">1</a>

    <ul class="sbOptions">
         <li><a href="#1">1</a></li>
         <li><a href="#2">2</a></li>
         <li><a href="#3">3</a></li>
         <li><a href="#4">4</a></li>
    </ul>
</div>

<div class="sbHolder" style="z-index:10">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">A</a>

    <ul class="sbOptions">
        <li><a href="#1">A</a></li>
        <li><a href="#2">B</a></li>
        <li><a href="#3">C</a></li>
        <li><a href="#4">D</a></li>
    </ul>
</div>

Upvotes: 0

webnoob
webnoob

Reputation: 15934

Have a look at this article.

In short, it uses jquery to sort the z-index by changing other elements:

One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues. 

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

Upvotes: 0

kelly johnson
kelly johnson

Reputation: 1636

I had to keep adding Z-index 1 in IE7 to even start getting jsfiddle to work.

Have you tried the ole zoom:auto in places? Put that into the css.

Also, z-index and absolute would seem almost at odds... absolute pulls the element out of document flow so there is no 'real' z-index different from another that is pulled out.

Perhaps trying different positioning schemes..

Upvotes: 0

Related Questions