While developing my browser-based game, I’m always using Firefox and periodically testing in Internet Explorer 7. A few months ago, I set up a wiki for the game and asked players to contribute to the documentation. One helpful player posted some screenshots of the game in Internet Explorer 6 and I was horrified. I knew there were transparency issues with png graphics in IE6, as well as some CSS incompatibilities, and I gave a disclaimer to say so, but coming face to face with what the site actually looked like in IE6 was quite revealing. I checked out my Google Analytics page and I could see that my visitors are split almost half and half between Firefox and IE. When I looked at the IE breakdown, I saw that it’s pretty close to half IE7 and half IE6. This means 25% of my visitors are still using IE6. I decided I didn’t want to rely 100% on a disclaimer to push IE6 out of mind; I needed to do do some fixin’.

My first problem was alpha transparency in png graphics. As many web designers know, these graphics end up with solid background colors in IE6. In most cases, it ends up looking like crap. I initially thought, am I going to have to change all my PNG graphics to the inferior GIF format just so it won’t look so bad in IE6? There are javascript hacks out there that will force transparencies to mostly work on IE6. I decided instead I wanted to create a copy of every png image as a gif and serve up the gifs to IE6 users and give pngs to everyone else. This way I wouldn’t have to worry about any problems in IE6, and my disclaimer still applies – the graphics look slightly better in Firefox, Opera, IE7, or Safari than they do in IE6.

To accomplish this task in Rails, I created an ‘images_ie6’ directory alongside my ‘images’ directory in ‘public’. I used ImageMagick’s ‘convert’ command-line tool to convert all the pngs into gifs and placed them in the same folder structure, but in the base ‘images_ie6’ directory. Then I rewrote image_tag to detect the user agent and change the images path to ‘images_ie6’, and change .png to .gif if it’s IE6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# in app/helpers/application_helper.rb 
# override image tag to point IE6 users to a different directory with GIFs instead of PNGs
module ActionView::Helpers::AssetTagHelper
  alias_method(:orig_image_tag, :image_tag) unless method_defined?(:orig_image_tag) 
  
  def image_tag(path, options = {})
    if request.env['HTTP_USER_AGENT'] and request.env['HTTP_USER_AGENT'].include? "MSIE 6.0" 
      path.gsub! ".png", ".gif"
      path.gsub! "/images/", ""
      path = "/images_ie6/#{path}"
    end
    orig_image_tag(path, options)
  end
end

Notice that I need to check to see if the environment variable for HTTP_USER_AGENT is set before checking to see if it contains “MSIE 6.0”. For some reason, the test environment sets some variables in request.env, but leaves out the user agent string. The extra check keeps tests from failing.

Aside from the image_tag hack, I had to deal with the problems that some images were referenced from CSS (background properties for example), and there were other CSS-related issues (IE6 has trouble with the min-height and min-width properties). So to handle those problems, I’m loading an extra ie6fixes.css file if the user agent indicates IE6. These styles overwrite only the necessary elements defined in the normal stylesheets.

1
2

# in app/views/layouts/application.html  
stylesheet_link_tag 'ie6fixes' if request.env['HTTP_USER_AGENT'] and request.env['HTTP_USER_AGENT'].include? "MSIE 6.0" 

Standard disclaimer about trusting user agent strings applies. Frankly, I'm of the opinion (like many) that if a visitor messes with their user agent string, they're on their own.