homepage Welcome to WebmasterWorld Guest from 23.20.63.27
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
overlay not working in IEs 7 and 8
dupalo




msg:4481416
 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

 

alt131




msg:4482329
 8:17 pm on Aug 6, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved