Cross browser Opacity

Question

I have a very simple requirement, make a link look disabled. Why is it this hard??

.disabled { 
    -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; 
}

Is my style. I have applied it to an li...but in IE7 it just does nothing. FF and IE8 it seems to work in, but IE7 is just rubbish

Any clues?

Answer 1

Not sure, but try 0.50 instead of .50

Answer 2

As far as I remember, an element needs either layout (e.g. "zoom: 1") or a background color for filter:alpha to work.

Answer 3

It needs explicit dimensions or a zoom factor to "have layout" in IE land.

Answer 4

Can i make a suggestion that I appreciate not exactly what you want but would give you an effect similar to opacity.

Open your image editor type some text in your default link colour

Change the opacity to 50%

Capture the new colour value

.disabled { 
color:#yournewcolorvalue;

}

for example if i take default blue link color #0000FF

the 50% opacity value is #7F7FFF

Answer 5

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);   
opacity:.5;