Edinburgh Web Development

IE, opacity and ClearType

by Iain Wilson

24 February 2011

If you're using opacity to fade in/out elements in your web developments, you'll know dealing with Internet Explorer is not for the faint-hearted. Doesn't matter if you're using CSS, jQuery or writing the Javascript yourself; at some point you're going to hit a situation that you/your customer won't like.

First off you need to cater for the different browsers. In Javascript you'll probably have a function that does something like this :

function setOpacity (o, opacity) { 
o.style.filter = "alpha(style=0,opacity:"   opacity   ")"; // IE 
o.style.KHTMLOpacity = opacity / 100; // Konqueror 
o.style.MozOpacity = opacity / 100; // Mozilla (old) 
o.style.opacity = opacity / 100; // Mozilla (new) 

In this function 'o' is the element you will be applying opacity to and it will work fine in all the browsers - except dear old IE.

For IE you need to do a few things more

  • First, make sure the element you're applying it on hasLayout - give it a width or a height.
  • Second, the opacity will work ok, but the element will be rendered with what looks like artifacts if you don't put a background colour or image on the containing element (the div or whatever that contains the opaqued element).
  • And thirdly - and this is a classic - opacity in IE switches off ClearType on Windows, so if your opaqued element contains text it will be rendered without ClearType, so the text will look reedy. To get around this you must set position on the containing element to relative.

Microsoft have been promising to fix this 'feature' for quite a while, so maybe we'll see it disappearing in future browsers, but right now that's the way it is.

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy