IE 6 users: rollover the images below.DEMO |
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]:
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
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].
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.
- Updated:
- 08.31.08
- .ZIP Size:
- ≈ 3kb
- Browsers:
- IE 6
That’s it! Now you can go through your day knowing the satisfaction of triumphing over IE6 and it’s stodgy ways.
DOCS |
updated: 08.31.08
Fixed the “Red X”s” problem. Thanks to Eugene Cook.
updated: 08.27.08
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.
updated: 07.16.08
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.
updated: 07.09.08
Added a couple of lines so that IMG tags don’t require a width and height. Thanks to Jeff Leombruno.
updated: 07.08.08
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 .