IE6 Transparent PNG and Dead Links

Ever tried using transparent PNG images on IE6? If you have then you must know that since IE6 doesn't support PNG24 natively you must use an IE-specific CSS rule to get IE6 to display transparent PNG properly - the "Microsoft.AlphaImageLoader" rule.

Annoyingly, the "Microsoft.AlphaImageLoader" rule, while solving the transparency problem, creates another problem - Any links nested inside an element to which this rule is applied magically stop working.

Luckily, there's a very simple solution for this problem - Applying relative positioning to the links nested inside the element to which you applied the "Microsoft.AlphaImageLoader" rule should straighten IE6's wrong ways and force it to treats the links the way Tim Berners-Lee intended (or in other words, get them all nice and working again).

Consider the following CSS:

#ColumnWithPNG{
  background:transparent url('/transparentBG.png') no-repeat left top;
}

Now lets add some IE6-Specific CSS

/* IE6 Specific */
#ColumnWithPNG{
  background:transparent;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/transparentBG.png',sizingMethod='scale');
}

/* Fix IE6 Broken Links */
* html #ColumnWithPNG a{
  position:relative;
}

That should do it...

Note that the "Microsoft.AlphaImageLoader" might not work if the element you apply it to doesn't have a fixed width. If you find that this is the case, simply fix the above selector like so:

/* IE6 Specific */
#ColumnWithPNG{
  background:transparent;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/transparentBG.png',sizingMethod='scale');
  width:450px; /* PNG Image Width */
}

Happy hacking :)

• Moosort - Mootools table-sorting
• Multi-format Web media player
• Moopick - Mootools-based Color Picker
• Moobox - Mootools-based Modal Window
• Serving Ruby on Rails with Apache2 and mod_fcgid on Leopard
• Setting up Apache, MySQL and PHP 5 with GD support on Leopard
• IE6 Transparent PNG and Dead Links
• Image Replacement For Form Buttons