IE8 & CSS opacity = fail

I’m putting together a new look for this blog, it’s a much needed 2010 refresh. An element of the new design uses a semi-transparent opacity (mouseover the items on the wooden floor above).

This is not a problem in Firefox, Chrome or Safari. This isn’t even a problem in IE7 but … Microsoft saw fit to screw IE over once again and break CSS opacity styling with IE8. I’m possibly in a worse case scenario, using absolute positioned divs, initially set with display: none.

I’ve tried all the recommended approaches without success.

position: absolute;
background-color: black; /* for IE */
background: rgba(0,0,0,0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);

I’ve tried other combinations too including the method on W3 Schools, which works when I view it in IE8 (but doesn’t on my site).

opacity:0.4; /* effects other browsers */
filter: alpha(opacity=60);

I guess if I don’t resort to a transparent PNG/GIF background, my new design will have to look a little ugly in IE8.

For now I’ve ripped out all the IE specific CSS attributes, at present IE accounts for < 5% of traffic on my blog. I’m not sure it’s worth the effort, as this is due to change with IE9 (fingers crossed on decent CSS3 support).