Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

IE and .PNGs Continued.


As I continue on my discussion of using .PNGs in IE, please note that you must view this page in IE 6 or 5.5 to see the effects of the scripts.

The first solution I investigated is Bob Sola's pngfix.js solution. It is essentially based on the AlphaImageLoader filter. The clever part is that it uses JavaScript (hidden in conditional comments) re-writes the HTML tags for the .PNG images as needed. Mr. Sola has conveniently provided a nice plug-in solution for the problem, but there are still too many limitations for it to work for me. ("CSS backround PNGs not supported") - D'oh!

Mr. Goomba - Border, but no height or width. Starman - No height, no width, no border. Fireflower - Height & width, but no border. Secondly, I looked at Angus Turnbull's CSS-Only IE .PNG solution. It works by using CSS to apply a behavior (another IE-only scripting method) to the troublesome .PNG images. (Quick & dirty install instructions.) It still relies on the AlphaImageLoader filter, so no support for IE earlier than 5.5. Also, don't try testing from a local directory on your computer; the .HTC file seems to require that the page be hosted from a server. But it actually works pretty well, as you can see on Fire Flower, Starman and Mr. Goomba here. You've got to be careful with your borders & height/width tags - see how Mr. Goomba is a little fuzzy here? Also, the fix only applied itself sporadically on when used page; which is what's causing the sidebar elements to be too long, and hence the whole sidebar doesn't fit floated next to the main content. I'd say it's a reasonably good solution if you're dying to go this way, but it's not yet perfect.

After looking at all these script-dandy solutions, I haven't found one flexible enough to be worth the effort it takes to implement it. The ROI just doesn't exist for me. Particularly since IE7 does handle the .PNGs well enough, so the future is looking up.

IE6 isn't gone yet, so it still needs a solution for websites that must degrade gracefully. The solution I'm going to propose isn't clever. It's dead simple, requires an absolute minimum of code, and provides a semantically appropriate solution for IE6, IE5.5 and earlier. My solution is to make .gifs. Next time, I'll give you a Photoshop tutorial for changing all your .PNGs into .GIFs for IE only. If it's worth it to you...


Tags: css graphics javascript

Authorized users may log-in to leave a comment.

Last Blog: IE and the AlphaImageLoader for .PNGs.

Next Blog: IE and .PNGS - Fini.