Well I was just designing the new look and feel of a project I have started and it required the use of some gradients images. Now the problem was simple I had a background colour and I needed to fade this to white in my footer (Please see image below). So I created the gradients in PS and saved it as a png.

IE FF Gradient Example

Upon loading it in FF all was good, but loading it in IE showes the gradient image was not only darker than that in FF but it didn’t blend with the underlying base color.

I strached my head for quite a while and in the end learnt the following.

IE .png palette has a bug in which it cann’t display the gAMA chunk of the image. This causes them to be rendered incorrectly.

Now there are two possible fixes for this.

  1. Don’t use a png, use a gif
  2. Use this tool to remove the gAMA chunk from the image, http://psydk.org/PngOptimizer.php