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.

Click on the icon in the lower right corner to move to full screen.

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.

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Web Design
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Computer Skills
    App Training
    Alfred Workflows for IntermediatesAlfred400
    Welcome back! Since you are reading this, you must have enjoyed the beginner's tutorial. Great! Now, let’s dig a little deeper by making a workflow that will help manage our Downloads folder, as well as a Projects Manager.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Animation That Works (Part 3 of 4)Spriting icon large
    In our first post in this series, we introduced spriting, and how it can be used to do easy and effective cross-browser animation on the web. In the second post, we got some simple animations up and running, although they had a fair amount of bugs and the code was certainly not ready to go live. Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    Mobile Development
    C++ Succinctly: IntroductionPreview image@2x
    C++ Succinctly was written to help professional C# developers learn modern C++ programming. The aim of this series is to leverage your existing C# knowledge in order to expand your skills.Read More…