Opacity issue in Internet Explorer and Opera

Question

I've problem with opacity for IE8 and Opera9-10. My little JS adds a CSS class to a row (<tr>) when users click on it. This is the class:

.selected { 
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
    filter: alpha(opacity=80); /* IE7 */
}

Opacity is applied in Firefox and Google Chrome but not in IE and Opera.

Answer 1

From the IE Blog:

.selected { 
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  /* IE7 */
}

If this still doesn't work, it's probably an issue with some inheritance and we'll need to see some scirpt and markup or an online example.

Answer 2

What happens if you apply your class to a single TD in the table? Does that work any better? Another option would be to use a PNG with alpha-transparency as a background image for the TR and apply this via your class (but this wouldn't work in IE6).