Any web developer knows that Internet Explorer 6 can’t load PNG files with transparency (24 bits). We have to use filter “AlphaImageLoader” to fix it, that is very hard and you will use more resources applying this solution.

Drew Diller public researched post “Medicine for your IE6/PNG headache” and javascript library DD_belatedPNG (Current: 0.0.7a on 2009.01.01). That is a very good solution but it’s got one big problem: If you are going to use CSS sprites, you will have your png a little fuzzy. That problem prevents us from using this library.

The problem is inside VML technology with shape and fill objects (what Drew Diller have used).

So I’ve written a special CSS library for CSS sprites use.

What do we need?

1. Declare VML namespace for Internet Explorer
2. DOM ready CSS event
3. My CSS library

Let’s do it!

1. Declare VML namespace for Internet Explorer

Using Conditional Comments in head part of our HTML:

1
2
3

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<![endif]-->

2. DOM ready CSS event

global.domready.ie.css — this is jQuery light DOM ready event written by expression.

Connect it to our document for all of IE:

1
2
3
4

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
	<link href="global.domready.ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

3. My CSS library

g-png.ie6.css — library written by expression (with english comments).

Connect it to our document, final result:

1
2
3
4
5
6
7
8

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
	<link href="global.domready.ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
 
<!--[if IE 6]>
	<link href="g-png.ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

How to use it?

Simply connect all files and add class name “g-png” in tag where you need this png fix like:

<span class="shadow g-png"></span>

In action:

LOOKATME.RU
Campus.ru

Known issues

1. Background-repeat (use DD_belatedPNG for it).
2. Center positioning.
3. Opacity.

This is a complete solution, it means that you don’t need to use javascript manipulations.

And it’s specially thought for CSS sprites or simple png public.

Warning: Safari doesn’t like these files and ignores them.

Summary

Download all by one file.

This is a very light solution and has been tested and used in a big production web, but it may has bugs in different situations.

Feel free to mail me anytime if you have any problem or question.