Edinburgh Web Development

IE and opacity

by Iain Wilson

17 September 2008

As Web 2.0 kind of guys, we often use Javascript and opacity CSS to fade elements in and out or to make areas semi-transparent. The major browsers cater for opacity in slightly different ways, but the one that gives the most problems is - you guessed - Internet Explorer.

We thought we pretty much had it sussed, but recently came across a problem we hadn't seen before. We had a div containing an ordered list which faded out then faded back in with the list changed. This was on a timer which repainted the list every 10 seconds or so.

Problem was that it worked perfectly in Firefox, Safari, Opera etc, but in IE6 and IE7 when the list faded back in, the smaller fonts were ok but the larger bold fonts were rendered with pixel artefacts and were just plain unacceptable.

Of course, immediately thinking that it was the complicated list refreshing that was causing the problem, we wasted lots of time testing with just a simple piece of text - but the problem persisted. Finally, by trial and error we found what was causing the problem - the containing div must have a background color set.

So here are a few rules for IE opacity :

  • hasLayout must be set on element (use width or height)
  • background-color must be set on element

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