Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

overlay not working in IEs 7 and 8

   
8:53 pm on Aug 2, 2012 (gmt 0)



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
8:17 pm on Aug 6, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi Dupalo,

If you check the overlays in something like ie developer tools you'll see the jquery is re-writing the opacity inline and re-setting it to filter: alpha(opacity=0);. Although that should make the overlay fully transparent, it isn't. Manually adjusting the opacity makes it behave as expected. That suggests the issue (and the fix) is in the way the script is being handled when loaded.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month