31 May 2007

IE png hack

Tags: , ,

So we all know internet explorer has a few rendering ssues. A big issue for many developers is the inability to show alpha opacity in png images. Of course, this has been fixed in IE7, but not everyone has switched yet.

So here’s a little css hack that allows IE6 and IE5.5 to show PNG’s alpha transparency. See the source for the details. We declare the background twice. Once for IE (with filter property, which is IE only) and once for all other browser, where hacks are not necessary. IE6 does not recognize the > css selector, so it doesn’t get confused by the background property. Sadly, the css won’t validate due to the filter property.

update: If anyone is interested in reading some more on this topic, A List Apart has an article dealing with the problem. It gives a more detailed overview on png and its problems and shows how to use javascript to determine which browser is used and fix the png images accordingly. The article is a bit old, so keep Internet Explorer 7 in mind when applying these hacks.

Leave a Reply