#32: Using the Unit PNG Fix

* 11/24/2008  —  7 Comments *

by: Chris Coyier

Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display… but any areas of alpha transparency get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS “filter”. A newcomer on the scene is the “Unit PNG Fix” which is ridiculously easy to use. Simply link up a very tiny JavaScript file in your header and you are done!

Running time: 26 minutes

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Links from video:

Get the Flash Player to see this player.

Responses

  1. Tim says:

    There are some drawbacks however.
    You can’t use background-position and background-repeat.

  2. Snogle says:

    I love you..!

  3. Darren Huckey says:

    Chris – evidently, Unit Interactive moved the link to the Unit PNG Fix. The link you have listed is dead. Here is the correct link:

    http://unitinteractive.com/labs/unitpngfix.php

  4. Jon says:

    Very cool. Thanks Chris!

    The Unit Interactive site says that ” the CSS sprite technique will not work for pngs in IE6, when using the Unit PNG Fix.”

    What would be the best way to use transparent PNGs for a CSS sprite menu?

    Thanks again!

  5. lol that comment “Whats wrong with your website” was too funny !! :P