Internet Explorer and Opacity

To change the opacity of an item, we can use this CSS declaration:

opacity:0.25; /*the css standard*/
filter:alpha(opacity=25); /*sets opacity in IE*/

Hmmm. IE doesn’t support the CSS standard. Quelle surprise!

Here’s something else. If the element you are trying to make transparent doesn’t have layout in IE, the opacity won’t be set. The solution? Put zoom:1 on the element.

And I haven’t figured this completely out in IE8 standards mode, but I was trying to set opacity on an image wrapped in a link by assigning the opacity to the link itself. Should be inherited, I thought, like in IE8’s predecessors. But it wasn’t. I wound up getting it to work by assigning opacity directly to the image instead of the link.

So in summary, to get opacity to work in Internet Explorer versions 6 – 8:

  • Use filter:alpha(opacity=x), where x is a number from 0 to 100
  • place zoom:1 on the element if needed
  • assign the opacity directly to an image
Advertisements

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 )

Google+ photo

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

Connecting to %s