opacity in IE8 not working

Question

I have set opacity for a overlay which is working fine in FF, Chrome, Safari and IE9 but not in IE8. I googled alot but did not find any solution.

my css code is

#overlayEffectDiv { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.50;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    /* hide it by default */
    display: none;
}

In FF it is looking as below:

but in IE8 it is looking as below:

Answer 1

I don't think you syntax for the filter is correct:

http://blogs.msdn.com/b/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx

this might not be the cause of the problem but it might be worth ruling it out.

Answer 2

If the problem occurs for some animation effect involving the layer, you could avoid use filter at all in IE and use instead as a repeated background a small (not too small, like 2x2, use e.g. 100x100) transparent png file with a black background color and ~80% opacity

Answer 3

May be you have define zoom also. write like this:

#overlayEffectDiv { 
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    opacity: 0.50;
    *zoom:1;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    display: none;
}

Answer 4

Found solution here. Opacity was not the problem I did some debugging and found it was working fine for ie8 the issue was with jquery fadeIn and fadeOut. jQuery fadeIn was making translucent background to turn solid.

Thanks to all who helped.