Internet Explorer 6 is a web development headache for many reasons, but its lack of support for PNG alpha transparency is one of the most grating. It’s more-or-less a given that any cutting-edge design (even a relatively minimalist one) is going to have a place where one layer shines through another, or a single transparent image should be matched to multiple background colors, or—most commonly—anti-aliased text is placed over a photo or texture.
Getting these PNGs to actually be transparent is no longer a major issue—we’ve used a few different approaches over the years, but settled on Angus Turnbull’s iepngfix.htc as the most straightforward drop-in solution out there. The way it works is just really smart.
But while building out some recent client projects, we just couldn’t get it to catch. We checked and double-checked the file paths, and re-exported the PNG images, and finally copied a working example from a live client site, but nothing seemed to do it. Because IE has no decent debugger, I removed the conditional comment to see what I could learn in Firebug.
It turns out that our staging server sends the .htc file as text/plain, while the working client version was serving text/x-component. Changing out server config to mimic this fixed the problem. Later, some Googling revealed that the release notes for the newest beta version address this (and even include a PHP solution that serves the file while sending the correct headers).
There are still a whole host of limitations: no repeating images, weird layering glitches that happen even in IE7, and really bizarre link clickability issues. But iepngfix gets far enough to solve 90% of the problem.
You can follow any responses to this entry through the RSS 2.0 feed. Respond to this post.
Donald — So I’ve dealt with this issue as well and decided to take a different tack so I’m intrigued as to why you’ve chosen yours. :)
Given that IE6 is thankfully dwindling and dwindling, a while ago I choose to go the nice degradation route. When I use pngs, I include a IE6 conditional comment for a stylesheet which replaces the pngs with acceptably-rendered gifs — since transparency was the goal of using the pngs in the first place, it’s rarely anything else. So, why still use the htc fix if it often invites other user experience errors?
David
David,
Despite the various issues, there are a few times you just need PNGs — laying an image over a photo, or over various background colors (so you don’t have to make a PNG for every case), or if there’s a variable background (a texture, or the element is overlapping other elements, etc) and you don’t want to have to worry about absolutely positioning to get a GIF to match what’s behind it match up pixel-perfect. In that 10% of cases where the PNG fix doesn’t work (due to tiling or clickability issues or whatever), we either replace the PNG with a GIF in our IE stylesheet or (if it’s just fluff) just kill the image for IE6.
– Donald
Yep— and to that, David, I’d add that if we CAN execute something like PNG trans with full cross-browser compliance, it’s really satisfying to put in a few extra hours of sweat working out the bugs.
Take the most recent version of the design we’re working on for you. The little photo line simply HAS to scroll horizontally behind the trees, wouldn’t you agree? How could we possibly deny 30% of your browsing audience the pleasure of that tiny detail? :)
Hi Donald, I wonder whether you can suggest something. I have the same problem – my iepngfix works perfectly on on one environment, but on the live system it doesn’t work (I checked the cache and for some reason the 1px image never loads etc). I definitely have all the paths correct. It sounds like the issue you had – the way the file is being served.
Can you suggest how I would go about changing that (I am running apache both locally and live).. Much appreciated.