Comments on: Cross-browser opacity

By: Martin

Martin — Fri, 27 Feb 2009 21:53:57 +0000

And look al that nasty html comments just for IE.. what a wonderful world huh..

microsoft is just a reflex of their users

thanks for the info man! You are the one!

By: Matthew Edmunds

Matthew Edmunds — Thu, 11 Sep 2008 04:40:51 +0000

Hi, I am doing fine with Firefox using opacity to create roll overs. I can’t make it work in ie7

I am guessing it is because I am not using the #element and am assigning a class.

a.button:hover {opacity: 0;-moz-opacity:0.0;}
a.button:visited {opacity: 0.4; -moz-opacity:0.4;}

a.button:hover {filter: alpha(opacity=00);}
a.button:visited {filter: alpha(opacity=40);}

Is there a way around this for IE7? or is it simply not supported?

It is very succinct and simple method to create a rollover using 1 image in the BG and controlling the opacity of the image over it rather than using the old fashioned java style rollovers.

Thank you for your help with this.

Matthew

By: doctyper

doctyper — Wed, 16 Jul 2008 22:23:03 +0000

Wow, Troy. So bitter.

Do remember that this article was written more than A YEAR AGO. And thanks for pointing out my redoundancy [sic].

By: Troy III

Troy III — Mon, 09 Jun 2008 23:31:36 +0000

Explorer inroduced OPACITY back in ancient 1997.
W3C bastards, after e decade decided to reinvent the wheel and teach Einstein how to call his own “Special Theory of Relativity”. Because from now on, “it will be called *our discovery*”!

By the way, your redoundant code sucks. Especially your margin left -3px.
There is no need to hide anything, -who gives a shit that netscape loosers decided to forcedly yeld a CSS error in their browser. (Wich, by the way – is aganist the rules of CSS) But anyhow. The page will display and function perfectly on any rigid and lazy Netscape bastard breed.

the css:
~~~~~~~~~~~~~~~~~~~~~~~
filter: alpha(opacity=50);
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
~~~~~~~~~~~~~~~~~~~~~~~
will do just fine…

By: John Lascurettes

John Lascurettes — Mon, 07 Jan 2008 17:22:21 +0000

Also, note that any Windows version of IE will only accept the filter:opacity() value if the element it is being applied to also hasLayout: http://www.satzansatz.de/cssd/onhavinglayout.html

By: John Lascurettes

John Lascurettes — Sat, 05 Jan 2008 00:55:39 +0000

BTW, you haven’t needed -moz-opacity since +before+ gecko 1.7 (which is what was used in Firefox 1. 0). Use simply opacity: for all modern gecko browsers (firefox), webkit browsers and Opera.

By: nicky v

nicky v — Tue, 15 May 2007 16:03:54 +0000

thank you this was really helpful

By: HelloWorld

HelloWorld — Sat, 28 Apr 2007 09:51:50 +0000

Peace people

We love you

By: doctyper

doctyper — Mon, 12 Mar 2007 15:10:07 +0000

Opacity on an element means the element and its children will retain the transparent value. Your list is a child of the headerbar, which means it will also become transparent.

By: roxanne

roxanne — Mon, 12 Mar 2007 05:28:55 +0000

i tried the third method on the headerbar here http://roxstyle.com/ but it seems to mess up the link style of the list within the element.