cssvault - inspiring creativity

I just stumbled upon Unit PNG Fix by Unit Interactive. It is one among the many JavaScript based PNG transparency solution for IE6, and is inspired by the SuperSleight solution. What’s good about it though is that it is fully DOM based and automatic. There is no need to assign any additional classes (such is the case with TwinHelix IE PNG Fix) or rename any files (refer to Dean Edwards IE7 fix).

The official website lists the following features:

• Very compact javascript: Under 1kb!
• Fixes some interactivity problems caused by IE’s filter attribute.
• Works on img objects and background-image attributes.
• Runs automatically. You don’t have to define classes or call functions.
• Allows for auto width and auto height elements.
• Super simple to deploy.

Impressed, I gave it a spin. I took one of my projects and replaced the existing TwinHelix PNG Fix code with Unit PNG Fix. It seems to work a charm in all areas except for one: elements with absolute positioning and / or z-index gets screwed up, as can be seen in the following screenshots:

Correct layout using TwinHelix PNG Fix:

This time using Unit PNG Fix:

Here’s the actual CSS code:

h1 a { background: url(images/logo.png) no-repeat; display: block; width: 256px; height: 128px; position: absolute; top: 15px; left: 472px; z-index: 99; }


Other than that, for “normal uses”, Unit is the easiest way to go. The project is only two weeks old, and I have high hopes that bugs like these will eventually be fixed to provide a truly plug and play IE7 PNG transparency solution.

On the same note, the PNG8 format may actually be preferable for low color, non-gradient alpha transparency requirements.

Share

This entry was posted on Wednesday, July 30th, 2008 at 3:46 pm and is filed under Automation, Browser, CSS, Hacks, IE, JavaScript, Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.