IE 6 users: rollover the images below.DEMO |
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.
- .ZIP Size:
- ≈ 2kb
- IE 6
That’s it! Now you can go through your day knowing the satisfaction of triumphing over IE6 and it’s stodgy ways.
Now fixes before page load, eliminating flickers. Also, added opt in functionality so you can fix only the pngs you want.
Fixed the “Red X”s” problem. Thanks to Eugene Cook.
Fixed the absolute positioning problem for real this time and added a README. Also, added the clear.gif back in—some versions of IE6 were having problems. File size got slightly larger, but the script is still around 1kb.
Cached the regexp and optimized the loop to speed things up quite a bit [especially for pages with tons of elements]. Thanks to Marcos Fernández.
Added a couple of lines so that IMG tags don’t require a width and height. Thanks to Jeff Leombruno.
Fixed page element functionality issues with background pngs. All elements should now be accessible (except other pngs).
Improvements, Bugs, Complaints? We’d like to hear from you at .