Intro

It's a generally known bug of MSIE 6 (and versions below) not to show correctly PNG images with transparency. MSIE 7 and 8 have fixed this bug.

There are several ways to workaround this problem. I created this plugin being initially inspired with the solution of Kirill Monakhov announced at his Russian blog.

The plugin introduces a new helper method which accepts the output of ordinary image_tag helper and only if the user-agent is MSIE 6.x modifies the html code fixing the problem.

Installation

ruby script/plugin install http://svn.xp-dev.com/svn/Arhimed_plugins/ie6_png_fix

During the installation the plugin puts its utility image file
'RAILS_ROOT/vendor/plugins/ie6_png_fix/utility_image/ie6_png_fix.gif' into the 'RAILS_ROOT/public/images' dir. So, in case of a manual installation just copy this file manually.

The plugin requires RMagick gem, so it should be installed on your system.

Usage example

In a view template instead of image_tag('your-transparent-image.png', options = {}) just use the new helper method fix_png:

       fix_png image_tag('your-transparent-image.png', options = {})

Things to mention

The plugin assumes that images are stored within the default '/public/images' dir.

Using fix_png you won't be able to resize the image using :size, :height, :width or :style attributes of image_tag. This is because of the image becomes a background and thus unreached by those attrs.

If you need a border around you transparent PNG you should explicitly ask for it via :border or :style attrs of the image_tag method. Also notice that in a normal case we would have Total_width = image_width + 2*border_width, but here we'll have Total_width = image_width. Border will 'eat' its width from the image.

Why only MSIE 6.0, what about 5.5 or less? Sorry guys, but the implemented solution works only on MSIE 6.0. But don't worry too much, statistic data shows extremely low rate of usage of MSIE 5.5 and below. Seems they won't rise again. :)