Problem with opacity in IE8

html css internet-explorer-8 internet-explorer-7 opacity

17,992

Solution 1

I had the same issue. I did a lot of searching and reading and found IE8 doesn't use the css for opacity other browsers use. Here is my CSS that I used for IE8:

#loading-div-background {
    display:none;
    position:absolute;
    top:0;
    left:0;
    background:gray;
    width:100%;
    height:100%;
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

However, it still didn't work with position:fixed, but once I put in position:absolute it started working.

Solution 2

IE8 doesn't support the CSS attribute opacity you have to use an MS filter instead:

    opacity: "0",
    filter: alpha(opacity = 50); /*change value to suit your needs*/

That's not all though. This only works when the element is positioned, thankfully you have that already so it will work. For future reference if you don't have any position set, you can add zoom: 1 to the selector and it will work in IE :)

17,992

Author by

Kai

SharePoint\O365 developer, consultant and enthusiast working with SharePoint since 2009. Looking for help on SharePoint with Node.JS? Join gitter chat and ask your question - sharepoint-node I like SharePoint for complexity, interesting and complicated tasks, none-standard decisions, etc... the list is long. I live in Belarus, Minsk. If you are curious where is Minsk, here you are - click on map You can find me on LinkedIn - Sergei Sergeev on GitHub - s-KaiNet on npmjs - s-kainet Also may be you are interesting in my SharePoint Add-ins: FAQ Page Smart Notifications

Updated on June 04, 2022

Comments

Kai almost 2 years

I try to solve a problem that appears in IE8. Html is very simple:

<div id="overlay">
</div>
<div id="imgcontainer">
     <div>
         <div id="source">
         </div>
      </div>
</div>

When I set (using jQuery) opacity of "#source" element with "0" in IE I can see the background of #overlay, not #imgcontainer > div, but why? There is a javascript code:

$(function(){
    $("#source").css({
        opacity: "0",
    });
    $("#overlay").css({
        width: $(window).width(),
        height: $(window).height(),
        display: "block",
        opacity: "0.6"
    });

    $("#imgcontainer").css({
        zIndex: 2,
        position: "fixed",
        opacity: "1",
        left: "0",
        right: "0",
        top: "100px",
        display: "block"
    });
});

You can try live example on jsFiddle.
UPD:
After some experiments I found the solution. It's really html\css issue, so I made some refactoring of code and remove jQuery tag. Imagine we have such html murk up:

<body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                </div>
            </div>
        </div>
</body>

and the css styles:

body {
    background-color: #c8c8c8;
}

#d1 {
    background-color: #6c0922;
    width: 500px;
    border: 1px solid black;
    filter: alpha(opacity = 100);
}

#d2 {
    background-color: #146122;
    width: 350px;
    margin: 20px auto;
    border: 1px solid black;
}

#d3 {
    background-color: #0080c0;
    height: 100px;
    margin: 10px 65px;
    filter: alpha(opacity = 0);
    zoom: 1;
}

At first look all is ok, we expect that #d3 become transparent and we can see #d2 background(dark green). But not so simple in IE7\8. In IE we can see body!(grey) background through #d2 and #d1. All magic in #d1 you guessed it. When we remove filter: alpha(opacity = 100); all work correctly.

You can ask - but why you set opacity = 1 to the element which is non-transparent now? I don't know :). May be in some reason you should use this behavior. Very interesting and unexpected behavior.

You can play with this example in jsFiddle.