Z-index- 1; doesn't appear in IE 7

Question

Trying to add z-index: -1; to a div class( "ie7") positioned relative. The div class lays with in an other div positioned relative. It works in any other ie browser over ie 7. Any help would be appreaciated...

<div class="category group closed">

    <div class="group_description">
        <h2>Lorem ipsum</h2>
        <span>Lorem ipsum...</span>
    </div>


    <div class="asset_link">
    <a class="video_link" href="#">
        <img class="avatar" src=""/>

        <div class="text_content">
            <div class="text-inner">
                <h3>Lorem ipsum</h3>
                <span>Lorem ipsum...</span>
            </div>  
            <h4 class="name_title">John Doe</h4>
        </div>
    </a>
    </div>



    <div class="not_available"><h1>This session is not yet available</h1></div>
</div>
</div>

CSS: 

.group_description {
    margin: 30px;
    width: 843px;
    overflow: hidden;
}


.closed {
    background: url('../images/not_available_bg.png');
    z-index:auto;
}
.closed .group_description,
.closed .asset_link {
    position: relative;
    z-index: -1;    
    *filter: alpha(opacity=40);
}

.category.group.closed .not_available {
    display:block!important;
    background: #79c7d4;
    width: 491px;
    height: 110px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -245px;
}

.category.group.closed .not_available h1 {
    color: #fff!important;
    width: inherit;
    position: absolute;
    margin-top: 40px ;
    text-align: center;
    *margin-left: 35px;  
}

.asset_link {
    margin: 0 auto 30px 30px;
    width: 407px;
    height: 116px;
    float: left;
    overflow: hidden;
}

.asset_link img.avatar {
    width: 110px;
    background: #e7e7e7 url('../images/avatar.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    float: left;
}

.asset_link .text_content {
    background: #f4f4f4;
    margin-left: 2px;
    width: 293px;
    height: 100%;
    float:left;
}

.asset_link .text-inner {
    margin: 15px;
    height: 60px;
    width: 260px;
    word-wrap: break-word;
}

h4.name_title {margin-left: 15px;font-size: 11px!important;}

possible duplicate of [z-index working in ie8, not ie7](http://stackoverflow.com/questions/5313057/z-index-working-in-ie8-not-ie7) — Fabrizio Calderan, Mar 21 '14 at 14:26
Since my code weren't really complete here is the j-fiddle http://jsfiddle.net/gail/YL6YJ/ — user3446600, Mar 21 '14 at 14:28
Ok, Diodeus ...is there a more preferable way to make it so? — user3446600, Mar 21 '14 at 14:31
Thank you Mark! Allready tried...however since it works in all the other browser and over IE 7 it would be nice to keep position: relative to the div though... Thnx anyway — user3446600, Mar 21 '14 at 14:34
The thing is that the a tags should not be clickable when session is not available therefor need to display them underneath the div.category — user3446600, Mar 21 '14 at 14:47

score 1 · Answer 1 · answered Mar 21 '14 at 14:27

1

I'm pretty sure this is a common bug to do with nested elements and the way ie7 actually handles the z-index attibute.

here is an article explainging it:

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

answered Mar 21 '14 at 14:27

Mark

4,773
8
53
91

score 0 · Answer 2 · answered Mar 21 '14 at 14:35

0

IE 7 has a z-index reversal bug that never got fixed.

if you use jQyery you can use this to make it work properly:

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

http://vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

answered Mar 21 '14 at 14:35

mahatmanich

10,791
5
63
82

Tried this as well...but it really screws up all other elements on the page I'm trying to implement this on... it would be nice if this code could be added to specific elements though...but can't really get it to work the way I would like... – user3446600 Mar 21 '14 at 14:42
as the code stands, this is applied to all 'div' elements ... for any element you can just do $('#my_el_with_id').css('zIndex', -100); – mahatmanich Mar 24 '14 at 15:15
please do select an answer if one is applicable ... right underneath the vote up vote down – mahatmanich Apr 29 '14 at 14:12

Z-index- 1; doesn't appear in IE 7

2 Answers2