DXImageTransform

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- &#91;if lte IE 6&#93;>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< !&#91;endif&#93; -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

Tags: , , , , , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template