Menu
01/08 2009

Fix your IE6 PNG issues more reliably

For about six months now, I have been to-ing and fro-ing with the whole idea of using png's in the build process. I am very strict about how I build sites and would never use a method that not ALL browsers supported. Thats where my frustration with png's started.

The reason png's are so popular with Web Designers is because they allow much more flexibility in the design. If you use a png as a background to your design because it contains a nice smooth gradient, this allows the designer to have the flexibility of changing their mind (this is just as true if the client decides the same) about the colour that goes underneath the graphic. The png is clever enough to follow suit due to its tranparency settings. How pngs actually allow this is the subject for a different article.

So what's the problem?

The problem with IE6 is that it does not support the alpha-transparency property that other more modern browsers have addressed. This can be overcome in an overly tiresome method of browser hacking and combersome use of another image format called the gif file. The gif file was used as the default option before pngs came along (as well as the jpg format) while they support transparency to an extent, they do not support the alpha channel of the file.

While you can use a png in your design on IE6, you will get a pretty odd looking result. Due to the settings a png requires to produce its transparent appearance, IE6 will put a grey tone in place of the area that should be transparent.

pngs

Other quirks

There are so many different 'png fixes' out there that while they work in very basic situations, as soon as you use them on slightly more complicated designs such as one with a repeating background, they start to behave strangely. This was my main gripe with them and instead would just stretch the image until it fitted into the space. The following example shows what happens when you try to use a png with a dodgy fix in an unordered list item.

backgroundpng

I usually stick to jQuery because I'm used to it but after trying offerings from various people like http://jquery.andreaseberhard.de/pngFix/ or http://www.campbellsdigitalsoup.co.uk/about/png-fix/ (it was thanks to the latter that I found a better solution) I found a much better solution to the problem. The luscious javascript from http://www.dillerdesign.com/experiment/DD_belatedPNG/ allows you to deal with the problem of stretching and repeated backgrounds.

How to make it work

It's fairly simple and best to restrict the usage of the script to IE6 by placing it in a conditional statement in the header.

  



Follow this with the command to execute the png fix either in the head of the document, just after the above javascript embed ..

  




.. or as I do, add it into your jquery functions code. I do this for accessibility purposes to reduce the amount of code in the page, just good practice.

  
$(document).ready(function () {

  /* other code */

  // Browser check for IE6
  if ($.browser.msie & amp;& amp; parseInt(jQuery.browser.version) == 6) {
    DD_belatedPNG.fix('.wrapper');
  }
});

The script currently doesn't work on the body element of the page because of the way it detects the elements using siblings in the DOM (read more about that in the 'Known issues' section of the png fix page)

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the javascript category. Here are some other related articles also in this category.