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:
There are some drawbacks however.
You can’t use background-position and background-repeat.
I love you..!
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
Fixed, thanks. That’s pretty insane of them to have not set up a redirect at least.
By the way, this is the new cool kid on the block for the PNG fix:
http://dillerdesign.com/experiment/DD_belatedPNG/
Very nice. I can’t wait to test it! Thanks for the tip!
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!
lol that comment “Whats wrong with your website” was too funny !! :P
Thank you Chris! Greetings from Craiova, Romania!
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!