Medicine for your IE6/PNG headache!
- What?
- How?
- Usage
- Alternative Usage
- Technical Summary
- Known Issues
- Supported Browsers
- To-Do List
- License
- Credits
- Download

Medicine for your IE6/PNG headache!

DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.

Author: Drew Diller

Email: drew.diller@gmail.com

URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Version: 0.0.7a

DD_belatedPNG is free software under the MIT License. Please familiarize yourself with known issues.

What?

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS.

If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended.

As a bonus, “fixed” elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class.

Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. I stumbled upon the notion that PNG images show up correctly in a VML fill element while working on DD_roundies. Thereafter, some Googling revealed that a few people had already known about this.

Usage

The intended implementation is pretty easy:

Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host.
Refer to it in your document (second line of the example code a few bullets down).
In another script node, add function calls to DD_belatedPNG.fix().
fix() requires one argument: a text string representing a CSS selector.
Here is an example:

<!--[if IE 6]>
      <script src="DD_belatedPNG.js"></script>
      <script>
        /* EXAMPLE */
        DD_belatedPNG.fix('.png_bg');
 
        /* string argument can be any CSS selector */
        /* .png_bg example is unnecessary */
        /* change it to what suits you! */
      </script>
      <![endif]-->

As of 0.0.3a, you can roll a bunch of CSS selectors into one argument, just like how you'd do a selector group in a CSS file: fix('.example1, .example2, img');

Alternative Usage

Due to popular demand, here is some documentation for how to “fix” elements on a pick-and-choose basis.

Refer to the DD_belatedPNG script as noted earlier.
Call DD_belatedPNG.fixPng( yourElement ), with the sole argument being an HTMLDomElement instead of a CSS selector.

Technical Summary

(Based on the normal usage approach)

Invoking DD_belatedPNG.fix() adds a line of CSS to the document via DOM.
The selector of this CSS is provided by the first argument for fix, which should be a string (such as #content div).
The declaration of this CSS is an MSIE-proprietary behavior - basically a Javascript expression bound to elements on the fly, without walking through a NodeList collection.
The content of the behavior executes a function with each matched element as its sole argument.
The first duty of this function is to reset its own style.behavior to no longer have a value; allowing behaviors to continue unchallenged is a recipe of for CPU-eating disaster.
The function then examines the element's dimensions, location, and styles using offsetWidth, offsetHeight, offsetLeft, offsetTop, and currentStyle
Using the above information, a VML <DD_belatedPNG:rect/> node is constructed and prepended (insertBefore) to the element.
The VML node is absolutely positioned to follow behind the element like a lost little puppy. It copies the matched element's z-index.
To support various positioning and repeat background properties, some of the VML element gets a style.clip rectangle.

Known Issues

You cannot use 'body' as the CSS selector argument for the fix() function. The VML is positioned using sibling DOM relationships! You cannot create a previousSibling of <body>, so trying to do so fails (badly). As an alternative, you can wrap the contents of the <body> element with a wrapper element, and apply the background style and fix function to that instead. It is not a question of getting it to work, it is a question of performance.
<TR> and <TD> elements do not play nicely yet. Do not attempt.
This script does not address background-position: fixed; functionality.
“Fixed” <IMG/> elements must take on visibility:hidden;, and thus become unclickable. I see no workaround other than using clear pixel GIF replacements, and that is code that I am not going to write.
<INPUT type=“image”/> nodes are not supported. The node with the original PNG SRC must take on visibility:hidden;
The “clickable elements” example boasted in this document may fail when combined with an alpha (opacity) filter. I don't know of a workaround yet.
Testing for PNG image presence is done by Javascript string search. If you have a URL that doesn't end in .png, you're not in luck. I suppose I could add a 'force' option - let me know if you need it.

Supported Browsers

This is intended solely for Internet Explorer 6. Use the script with conditional comments.

To-Do List

Find bugs.
???
Profit!
Test for memory leaks.
This item will always persist: find performance improvements.

License

DD_belatedPNG is free software under the MIT License.

The License shall remain addressable at this URL: http://dillerdesign.com/experiment/DD_belatedPNG/#license

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credits

My thanks to Jonathan Snook for pointing out something else I had written was almost there for good PNG support.

Download

Compressed 0.0.7a.js at 5.5Kb

Uncompressed 0.0.7a.js at 11Kb