I’ve recently been doing a web site refresh for someone who wanted their site to be more up to date looking, less ‘blocky’ and still CSS-based and standards-compliant. They’d had another designer approach them – or more particularly, the boyfriend of a staff member had approached them – and knocked up a good-looking, if table-based, version of their home page.

OK, he’d forgotten to check the site in different browsers and on different platforms, so it was very broken and likewise it was nowhere near being standards-compliant, but hey-ho…

So they asked me to produce a working, standards-compliant version which I duly did. One of the elements they wanted was a navigation bar to match their current logo colours and I created the background for the navigation area and saved it as a PNG: I didn’t want a GIF image due to the blockier look of the curved ends that would result from using that format and I didn’t want a JPG image due to the file size (I try to ensure my pages come banging in as quickly and efficiently as possible).

The result looked great in all the browsers I tested it on.

The client then asked me to change the navigation element so that there was some mouseover effect, so I went for their logo colour on the text over white when the mouse is over the link and white text over their logo colour in the ‘off’ state. At this point, it looked great in Firefox, Opera, Safari, etc. but the colours were off in Internet Explorer 7 (which has only recently included support for PNG images).

I thought it was just my CSS being screwed up and checked the PNG file I was using for the DIV background against the hex code I was using for the navigation element colour and found they were exactly right. I then did a screenshot and lifted the hex code from the background to find that it was different to the original image when displayed in Internet Explorer 7. The reason? Gamma correction within PNG images which gets stripped out by web browsers except for Internet Explorer! I’d never come across this before as I was used to using GIFs and JPEGs due to the earlier lack of PNG support in Internet Explorer.

There’s a good blog entry about it here that links to this article and this paper.