I am trying to apply z-index: -1; to a div with the class "ie7" that is positioned relative. This div is nested within another div that is also positioned relative. It seems to work in all IE browsers except for IE 7. Any assistance on this matter would be greatly appreciated...
<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;}