The Ultimate PNG Guide

I would say one of the coolest things in web development/design is the creative use of PNGs. Although, it’s a little hard because of the way that IE6 handles them.

I have already written about Using Dean Edwards’ IE7 Script, but I wanted to take it a step further and talk more about PNGs.

To Review

First, download the Dean Edwards script. Next, extract the files to the root of your webserver in a folder called ie7. It needs to be in this folder, because some of the scripts have a dependency on the folder.

Finally, just include the script in the head of your document using conditional comments:

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>

Ok, so now when you want to have the script “fix” the PNG in IE6, you just have to have -trans.png as the suffix of the filename of the image.

An Example

Now, I am no designer, but I have mocked-up a simple page to show some usage of PNGs.

Since the background on the body is the repeated diagonal lines, we cannot use a GIF for the rounded corners, because we aren’t sure where the corners will intersect with the lines on the bottom.

In an ideal world, this is how I would want to mark the page up.

But, in IE6, the PNGs have a blue glow around them. So if we apply the Dean Edwards scripts to the page, we see the bottom image disappears (keep in mind you have to be looking in IE6 to see this problem). This is because the script is applying the IE proprietary filter property, and once this applied, we cannot position or repeat a PNG.

So let’s change the way we are marking it up so that the bottom shows up in IE6. Basically, we have just added an empty div that contains the bottom background PNG.

Now we just have to worry about the repeated background of our main content area. In order to get rid of the blue glow, we have to apply IE’s filter property, which means that we can't repeat it.

But, if we apply the filter property manually and change the sizingMethod to scale, we can give the effect of repeating the background.

div#container div.inner {
 background-image: url(blank.gif);
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/content/2008/01/container-bg.png', sizingMethod='scale');

Basically, it’s just stretching the image to fit the area, but since it’s a simple image that we were going to repeat anyways, it looks fine stretched.

In Conclusion

Hopefully using a combination of these two PNG fixes can provide you with enough to get things looking good in all browsers.

Anyone have any other solutions?