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!

  7. Sinrise
    Permalink to comment#

    Thanks for the great tutorial. I struggled for a couple of hours trying to make this work using VisualStudio 2013 on an ASP.net 4.5 using MVC 5. No luck. The best I could do was get the PNG to disappear. Maybe I’m not calling the right paths in the JS file or something but I tried a lot of different things. Either it must be done much more complexly using bundles and conditionals or I’m just an idiot. I’ve foregone this idea and IE6 users are just out of luck but I’m holding out hope that someone will comment that knows how to make this work in a VS2013 ASP.net MVC project (using C#). I’m still a beginner at the MS way of doing things. I made it work in 5 mins with just raw code (static HTML) but wasted 2 hours in VS. TIA for any advice!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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