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">
<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>
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
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.