overlay not working correctly in IEs

[Violet_82]

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. Here's the link
http://antobbo.webspace.virginmedia.com/various_tests/overlay/test.htm
It works ok in every browser and also IE9.
This is the css rule for the full page overlay:

#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;
}

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

[gabrielcastillo]

This one is a tricky one... took me a while to figure out. I tested with ie7, ie8. IE9 gets alil dark so you might want to change the condition to say if ie8 or below.

Add a class to your #full_page_overlay div

Example: <div id="full_page_overlay" class="transparent">

Then add this in your header.

<!--[if IE]>

   <style type="text/css">

   .transparent { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(StartColorStr='#80000000', EndColorStr='#80000000'); 
       zoom: 1;
    } 

    </style>

<![endif]-->

[Violet_82]

hi thanks for that, I thought it was a tricky one too : - )! Isn't there anyway to avoid having an alternative css notation for IEs, like incorporate all the filters and rule as above within existing css by any chance?

[charlesbecon]

A full page overlay sample purely in css..

.button
{
    width: 150px;
    padding: 10px;
    background-color: #FF8C00;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
    font-weight:bold;
    text-decoration:none;
}
#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:5;
    width:100%;
    height:100%;
    display:none;
}
#loginScreen
{
    height:380px;
    width:340px;
    margin:0 auto;
    position:relative;
    z-index:10;
    display:none;
    background: url(login.png) no-repeat;
    border:5px solid #cccccc;
    border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
    display:block;
    opacity:2;
}
.cancel
{
    display:block;
    position:absolute;
    top:3px;
    right:2px;
    background:rgb(245,245,245);
    color:black;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
}

Charles

Full source code.....Full Page Overlay in CSS