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 the AlphaImageLoader for .PNGs.

4.30.2007

How a .PNG with Alpha Transparency is rendered in IE6 With all of the useful features available in .PNGs, you might wonder why they aren't used more frequently on the web. This is largely because the .PNG support for IE6 (surprise!) isn't quite up to snuff. IE6 can't natively handle the alpha-transparencies (that smoothing effect) in .PNGs. Instead, IE will render your beautiful images as shown to the right, with a light blue background behind any transparent pixels if alpha-transparencies are used. (IE6 can handle opaque & fully transparent pixels (the same kind you get in .GIFs) in .PNGs just fine.)

So, what can you do? You can use the popular alpha channel loader JavaScript. It does get the job done on our volunteer goomba here. But, there are many problems with this method. First off, it relies on JavaScript being available, and it only adds enables the correct display in IE6 and IE5.5. Second, since it's proprietary IE code, no other browsers can read it, and they'll just show an empty box with a white dashed border instead of Mr. Goomba. (You could use conditional comments and JavaScript to feed a solution to IE.)

Home > Portfolio > CSS

But see here what happens as I try to use this solution in practice. I have a small pin image that I used as a background for breadcrumbs. I really need the image to appear once on the right side of some text that's floating right. But it stretches to fill the height & width of the div that's filled by the crumbs.

Home > Portfolio > CSS

No problem, right? Just add another (non-semantic) div (red dashed border this time) to surround the AlphaLoader div. But I've got to make the AlphaLoader div an inline element to make the pin appear on the same line as the text, and then the image disappears.

Our IE / Alpha .PNGs saga continues next time, as we test more exotic solutions.

Permalink

Tags: css graphics javascript

Authorized users may log-in to leave a comment.

Last Blog: (Not Quite) PNG-Tastic!

Next Blog: IE and .PNGs Continued.