Member Avatar for 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

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

  • 3 Contributors
  • 3 Replies
  • 212 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by charlesbecon

Dani AI

Generated

Quick diagnosis and practical fixes — IE7/8 often choke on opaque overlays for three common reasons: the proprietary filters interact badly with stacking contexts (so your overlay can sit visually behind other positioned elements), the overlay can be nested inside a positioned/transparent ancestor (nested opacity multiplies or hides it), and older IEs sometimes need an explicit document-height fallback when position:fixed behaves oddly. ’s IE-only gradient approach is a valid fallback for those browsers; ’s pure-CSS :target solution is great for modern browsers but won’t help IE8 and earlier.

Checklist to try (fast, in order):

  • Ensure the overlay element is a direct child of the <body> and placed last so it shares the top stacking context.
  • Make sure it is not inside any ancestor that has a position or opacity applied — move it out if it is.
  • Inspect with IE’s dev tools (F12): verify computed z-index and whether any parent has a filter/opacity that would affect children.
  • Keep your opacity declarations consistent across properties (the numeric ranges differ between standard opacity and IE’s Alpha/filter syntaxes).
  • If position:fixed misbehaves on that IE version, use a small script to size the overlay to the document height and to reapply on resize/scroll.

Small, safe script to ensure the overlay sits after body and covers the page height (use it only as an IE fallback):

// run after DOM ready
var o = document.getElementById('full_page_overlay');
if (o) {
  document.body.appendChild(o);
  var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.clientHeight);
  o.style.height = h + 'px';
}

If problems persist, temporarily remove any IE filter/alpha rules to see whether the overlay appears (this isolates whether the filter itself is creating the stacking issue). For broad compatibility the usual pattern is: use rgba() for modern browsers and an IE-specific fallback (conditional rule or targeted filter) for IE8 and below.

Recommended Answers

All 3 Replies

Member Avatar for 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]-->
Member Avatar for 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?

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.