Unit Interactive :: Labs

DEPLOYMENT |

Go ahead and download the zip. Go ahead, it won’t bite. Then add the following code to your header [make sure the paths reflect your folder structure]:

Next, add “clear.gif” to your images folder, and open unitpngfix.js. On the first line, make sure that the path correctly points to “clear.gif” [relative to the root, not the script folder].

Unit PNG Fix will, by default, run automatically on all pngs on the page. If you wish, you can force the script to only fix specific elements by adding the class “unitPng” to those elements. This will cause only those specified elements to be fixed, and may help you work around any layout issues that the Unit PNG Fix may cause by default.

A couple of things to note: Unit PNG Fix will work with the CSS background-repeat attribute… kinda. It does not work like background-repeat should [IE6’s filter property doesn’t allow that], but Unit PNG Fix does read the element’s CSS, and if it is using a background-repeat, the image will be stretched to fill the element background. This isn’t ideal, but it is all that can be expected of the filter property.

Also, at this time, there is no way to get background-position to work properly with the filter attribute, other than to make the script rewrite the div structure [which we thought inadvisable]. This means that the CSS sprite technique will not work for pngs in IE6, when using the Unit PNG Fix.

That’s it! Now you can go through your day knowing the satisfaction of triumphing over IE6 and it’s stodgy ways.

Improvements, Bugs, Complaints? We’d like to hear from you at .