filter:alpha

what's going on here?...

[dominick]

All right, I'm trying to make my links become opaque when I hover over them.

a:link, a:visited, a:focus, a:active {color: #9999ff; font-style: italic; text-decoration: underline; filter:alpha(opacity=72%); -moz-opacity: 0.72;}

a:hover {position: relative; top: 2px; left: 2px; filter:alpha(opacity=100%); -moz-opacity: 1.0;}

It works in Mozilla, but won't work in IE. Am I doing something wrong, or does IE just suck?

[fwordboy]

as far as i know you're right and yes IE does suck, it sucks big time.

[photon]

That's a moz specific attribute. I believe that IE has its own proprietary filters to do roughly the same thing.

[edited to add...]
http*//msdn.microsoft.com/workshop/author/filter/filters.asp

[luckydude]

that's the problem with having too many browsers. Everytime you do something, you always have a fear if it is gonna work on different browsers or not. It sucks.

luckydude

[DrDoc]

Welcome to Webmaster World, dominick!

You don't need to specify the percentage. Try something like this instead:
filter: Alpha(opacity='72');

That should work :)

[aevea]

I've recently been playing around with something similar with a slightly transparent background. I finally got it to work with using an alpha transparent tiling png for the other browsers and alpha-transparency in a conditional comment (that leaves out the background image) for ie.

That had the added bonus of working in opera as well as mozilla and got the proprietary junk and ie hacks out of my stylesheet. One problem that I ran into is that ie requires "layout" to be set to use the filter. So basically, the object that you apply the filter to needs to be absolutely positioned or have an explicit height or width for it to work. Be sure to put that declaration in front of the filter declaration in the conditional comment.

Adam

[dcrombie]

You'd have to be pretty brave to use the M$ filters/transitions. If you wrote them for IE4 then the value is "alpha". For IE5.5 that changes to "DXImageTransform.Microsoft.Alpha" (M$ call this an 'alternate' implementation - does that mean you have to use it every second time?!?).

Safari already supports the CSS3 property: background-color: rgba(red,green,blue,alpha);

Some impressive examples here [web-graphics.com]

[dominick]

To hell with IE then.

[DrDoc]

"Alpha" works in IE5.5 and up.

[domokun]

i think in order to use it you have to specify a width attribute also e.g width: 50px;
that should make it work in all browsers.

hope this helps.

[dcrombie]

(someone correct me if this is wrong)

"Alpha" works in the current IE but probably not the next one (if there ever is a new version) because it's now deprecated. The new M$ command will work in the latest and the next version of IE. Neither will ever work in non-IE browers.

The 'moz-' commands will only work in Mozilla and related browsers (ie. never in IE, Safari, etc.). They will be deprecated when Mozilla starts supporting CSS3.

OTOH it is almost certain that the next round of browsers will support CSS3 attributes such as text-shadow, rgba(), etc. So my advice is to go for that and let people be surprised when they upgrade.

If we want the browsers to follow standards, then we should as well ;)

[dominick]

Yeah, we should. I just haven't heard of RGBA. And now that I have, I think it will be my best friend.

[IeuanJ]

Alpha blending is a nightmare, avoid it at all costs inweb design. Yes some browsers support it, but most dont, even if they do then some opertating systems don't so in all very few outside the web development circle will be able to see it anyway.

I am actually quit worried by browsers like Safari introducing more proprietary code like this. And yes it is proprietary becasue it is not yet included in any standard, CSS3 is not at that stage yet. What happens if it dissapears from the final standard like some things have done before? We will be stuck with yet more browser specific code out there to cause neat effects.

If you really must use these then make absolutely sure that the degrade properly.