Grow your CSS skills. Land your dream job.

#32: Using the Unit PNG Fix

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!

Links from video:

Comments

  1. Permalink to comment#

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

  2. Permalink to comment#

    I love you..!

  3. Darren Huckey
    Permalink to comment#

    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. Permalink to comment#

    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

  6. Tav
    Permalink to comment#

    Thank you Chris! Greetings from Craiova, Romania!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".