5 Easy Ways to Tackle IE6′s Transparency Issues

You create the perfect site in Photoshop using the latest trends. Half of your backgrounds contain a nice 50% opacity to simulate depth. The only problem comes from that darn old IE6, and how it decides to display a nasty gray background. You try to search the web for a solution, but there are dozens of choices. How do you know which methods are the best?

In today’s screencast, I’ll show you five easy ways to deal with this issue.

Unit PNG Fix

• Where do I Download It? : HERE
• Issues? : It doesn’t correctly tile transparent background images. Instead, it’ll will stretch your image. Not a huge issue, but beware. Other than that quirk, this method works perfectly. I find myself using it more than the others.

DD_BelatedPNG Fix

• Where do I Download It? : HERE
• Issues? : Nothing worth noting. Every fix has a few quirks, but this new fix might just prove to be the best so far.

IE7.js Fix

• Where do I Download It? : HERE
• Issues? : You’ll find that this file is larger than the others. That is because fixing the transparency issues is only part of what it does! It additionally brings many other IE6 deficiencies up to modern standards. Keep this in mind when choosing. If you only want to show transparency, this might not be the best choice.

Twin Helix Fix (from Angus Turnbull)

• Where do I Download It? : HERE
• Issues? : Angus has updated this file in the last six months; It now properly implements background-repeat/position! Rather than referencing a Javascript file, this fix requires the use of the “behavior” CSS property.

Don’t Fix It! Make a Statement!

Some people might prefer to ignore IE6 all together – as a way of making a statement. I leave it up to you to use your judgment. However, your decision should reflect your audience. If you wish to show an alert to IE6 users, you could use jQuery’s browser() method to detect IE6.

if ($.browser.msie && $.browser.version == 6.0) {
alert("Upgrade your browser, you big dummy!);
} else {
document.write('this is just for testing. Remove the "else" statement.');
}

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.