02 July 2010

IE8 opacity adventures

Yet another 3 hours lost in the mindless pursuit of something that is so simple yet so difficult to achieve due to the unbearable compatibility issues presented by the Internet Explorer.

As Microsoft clearly explains:

Unfortunately, the original filter syntax was not CSS 2.1 compliant.

So in order to achieve opacity filtering in IE8 you need to do something like:

.transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: .3;
}

Which is not so difficult at first glance. To make this even more compatible with the vast ocean of different browser and filtering implementations I extended this to:

.transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity = 30) ;
-moz-opacity: 0.3 ;
-khtml-opacity: 0.3 ;
opacity: 0.3 ;
}

As one might suppose from the first sentence of my blog the adventure was far from over. The style would work wonderfully in case it is applied directly to an IMG. But in my case I was applying it to a link that has the image as a nested element.

Of course all other browsers had no trouble understanding the simple logical assumption that the opacity filter should be propagandized to the nested elements. IE8 had other reasoning though. It DID apply the styles to the link element, but not to the image itself.

So, bottom line, to make it work the style should be applied directly to the element that needs to be styled. In my case that would mean something like:

.transparentDiv .imageClass {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity = 30) ;
-moz-opacity: 0.3 ;
-khtml-opacity: 0.3 ;
opacity: 0.3 ;
}

Thank you Microsoft, for a time well spent. And as a side note - the "Web developer" plugin is nothing like the Firebug extension. Were you not cleverly integrating your lousy browser into your operating system it would have been forgotten centuries ago.