overlay not working in IEs 7 and 8

Hi all, I am testing an overlay and I can't get it to work correctly in IE7 and 8, in that the full page is not visible the opacity is set to 0.
It works ok in every browser and also IE9.
Here's the full code.
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div class="main_container"><a href="#">This triggers the overlay</a></div>
<div class="main_container"><a href="#">and this too</a></div>
<div id="full_page_overlay">
</div>
<div id="overlay">
<p>text on the overlay</p>
<a href="#">Close the overlay here</a>
</div><!-- END OF car_overlay -->
</body>
</html>

CSS

/* OVERLAYS */
#overlay{
//background:url('overlay_close.png');
width:500px;
height:300px;
border:1px solid black;
position:fixed;
top:30%;
left:50%;
margin-left:-250px;
z-index:99999;
background-color:magenta;
display:none;

}
#full_page_overlay{
background:#000000;
opacity:0.35;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=35); /* For IE8 and earlier */
top:0px;
bottom:0px;
left:0px;
right:0px;
position:fixed;
z-index:99998;
display:none;
}


/* END OF OVERLAYS */

.main_container{
position:relative;
border:1px solid red;
width:300px;
height:300px;
}

javascript:

$(document).ready(function(){
$('.main_container a').click(function(){
$('#full_page_overlay').fadeIn('fast');
$('#overlay').fadeIn('slow');
});
$('#overlay a').click(function(){
$('#overlay').remove();
$('#full_page_overlay').remove();

});
});

Other than these 3 declarations

opacity:0.35;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=35); /* For IE8 and earlier */

what else can I do to get it to work in IEs?!
ANy help much appreciated

overlay not working in IEs 7 and 8

dupalo

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week