CODEWITHSUNDEEP
htmlcssopacity
Paul
Paul

Reputation: 9541

Cross browser Opacity

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?

Upvotes: 0

Views: 327

Answers (5)

Joe Morris
Joe Morris

Reputation: 841

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

Upvotes: 2

Michael Behan
Michael Behan

Reputation: 3443

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

Upvotes: 0

Azeem.Butt
Azeem.Butt

Reputation: 5861

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

Upvotes: 1

Pekka
Pekka

Reputation: 449385

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

Upvotes: 2

Seb
Seb

Reputation: 25147

Not sure, but try 0.50 instead of .50

Upvotes: 0

Related Questions