Opacity in Firefox, Safari and IE

Internet Explorer has suppored opacity for a long time but it’s also possible to change the opacity of a layer in Safari, and both newer and older versions of Mozilla (including Firefox).

The code for setting the opacity of a layer to 50% (in JavaScript) is:

  • For IE/Win: layer.style.filter = “alpha(opacity:50)”;
  • For Safari (pre version 1.2), Konqueror: layer.style.KHTMLOpacity = .5;
  • For older versions of Mozilla and Firefox: layer.style.MozOpacity = .5;
  • For Safari 1.2, newer Firefox and Mozilla using CSS3: layer.style.opacity = .5;

The main difference now between IE and the other browsers is that in IE opacity is specified as 0 to 100 whereas in Firefox and Safari it is a decimal from 0 to 1.

This entry was posted in Programming. Bookmark the permalink.

2 Responses to Opacity in Firefox, Safari and IE

  1. .w.e.s says:

    Thanks Karl, this is the solution I was looking for. I am working within the DOM via Javascript, and I was trying to create a fade effect that worked in IE, Safari, Firefox on the PC and MAC. and this was it! The key being to define them in the exact order you have them written in… I was trying to do IE last, but it must be done first.Take care.

  2. Anonymous says:

    very helpful, thanks a lot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s