PNGs, graphic filters, and yet more IE problems
written by craig, 10 August 2008
I really thought I understood IE’s PNG problems and knew how to get around them. But then, two more crop up within a week…
Failing filters in IE6
The template was completed, tested in every major browser, and submitted to the client … where it consistently failed in IE6. None of the 24-bit PNGs or transparency filters worked in any of their installations, whereas mine was fine.
The culprit turned out to be … Internet Explorer 7. Bizarrely, installing IE7 then running a standalone version of IE6, or simply uninstalling IE7 will replace IE6’s filter library and cause it to fail. Thanks Microsoft.
I didn’t notice the problem because I use IE6 as my main IE test browser (it causes the most problems). I run IE7 in a virtual machine so there’s no possibility of a conflict. However, the developers at my client’s office either used standalone versions of IE6 or the excellent IETester.
Fortunately, the problem can be fixed by copying ‘old’ working versions of dxtrans.dll and dxtmsft.dll to your IE6 installation folder. The files can be found in Evolt.org’s browser archive or you can download the IE6 filter fix files separately. I hope that helps someone – it caused me several hours of frustration!
IE7 and applying filters to 24-bit PNGs
Just when I thought it was safe to use PNGs in IE again, another problem crops up in IE7. Web developers begged Microsoft for PNG support and they finally implemented it in IE7. Sort of.
IE7 has absolutely no problem if you put a 24-bit alpha-transparent PNG on a page using an <img> tag or a CSS background. However, issues arise as soon as you try doing anything fancy – like making that image fade-in using the IE opacity filter.
From what I can see, IE7 sees the transparent pixels in the PNG, it knows that you want to make them even more transparent, has a mental fit, and makes them all solid black. Weird.
If this occurred in IE6, it would be fairly easy to fix by substituting the PNG for an 8-bit version, e.g. the following CSS exploits an IE6 bug:
background-image: url("my24bit.png") !important; /* IE7 and most other browsers */
background-image: url("my8bit.png"); /* IE6 and below */
Yes it’s a bit of a hack, but it’s minor, easy to debug, and is still valid CSS. However, IE7 is much harder to identify. I’m not sure the problem can be solved without resorting to conditional comments or browser sniffing – both of which should be avoided if possible.
So if you’re planning on using alpha-transparent PNGs, don’t bother applying IE filters! Unless someone knows of a solution?…