Here's another little web design gotcha that I stumbled across recently.

Create a PNG graphic of a block of colour and set it next to a div on a webpage with the same background colour. In Firefox, Safari and Chrome the graphic will merge seamlessly with the background colour. In IE7, however, the graphic and the background colour might be a slightly different shade.

PNG files contain a gamma value which should ensure that the colour is consistent across different screens and operating systems. The problem is that IE7 ignores this value, hence the random shades of colour. IE6 also ignores transparency in PNGs.

There is a CSS fix for the transparency issue - http://www.twinhelix.com/css/iepngfix, but not the gamma correction bug, as far as I know (thanks to @onion2k for the link and PNG info).

So the solution? Detect IE in your code and dynamically swop PNGs for JPGs. It's what I do for IE6 for PNGs with transparency on http://www.alltheshops.info. It's an ASP.NET site so it's easy to detect browsers using the HttpBrowserCapabilities class. The downside is that you have to have two versions of your graphics.

Or, you could always just not use PNGs..