Opacity is not working in IE8

Question

I found many similar questions in the site, but nothing came close to my rescue.I am dynamically appending a div to an element and in this div I have mentioned opacity style attribute as below.

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
opacity:0.5;
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');

This is being done to blur the page when an ajax request is sent to the server.This piece of code is written in a javascript area and hence i am using inline style.Above style works fine in IE10 but not in IE8.

Answer 1

Please move your css scripts into your own css file.

For example:

• create a file called style.css, then paste the code below:

#el_loading{
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* Netscape */
    -moz-opacity: 0.5;

    /* Safari 1.x */
    -khtml-opacity: 0.5;

    /* Good browsers */
    opacity: 0.5;

    background-color: #fbfbfb;
    height: 100%;
    width:100%;
    position:relative
    ;z-index:9999;
}

your script like this:

$('#cell').append('<div id="el_loading">
    <img  src="/myimage/loading.gif" title="Please Wait..." />
    <span>
        <b>Please wait ...</b>
    </span>
    </div>
</div>');

Hope that helps.

Answer 2

Use single quote for filter inside the style tag.

 $('#cell').append("<div id='el_loading' 
 style='-ms-filter:\progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\; /* double quote will end your style here only. So use single quote. */
 filter: alpha(opacity=50);
 opacity:0.5;
 background-color: #fbfbfb;
 height: 100%;
 width:100%;
position:relative;z-index:9999;'>
<div style='top: 74.2px; width: 91px;'>
<img  src='/myimage/loading.gif' title='Please Wait...' />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>");

Answer 3

Try to add the following

 -moz-opacity: 0.50;
    opacity:.50;
    filter: alpha(opacity=50);

So you code will become

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity:.50;
filter: alpha(opacity=50);
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');