by Iain Wilson
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
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.