hasLayout.net

Affected Versions

This bug affects: IE8, IE7

Symptoms

Colors specified in CSS differ from the ones used in PNG images despite having the same color code

Date of the Tutorial

Sun Aug 9 07:07:46 2009

Description

You create a logo or some fancy-shmancy artwork and save it as a PNG image. You put it as background (or normal image) and surround it with the same freakin' color you used in the image, but alas, they turn out to be of a different shade in IE (I was told this also affects Safari on Mac, don't have one - can't test). Let's take a looksie:

Demo

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush.png) no-repeat center;
}

The funny thing about this "bug" is that it's not really a bug :) It's a feature! What's even funnier is that I've seen people start looking for "web safe colors" and what not, thinking that they used "wrong" colors. Anyway, enough with the blabbering, let's get to solving this sucker.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Pseudo Bug)

Date of the Solution

Sun Aug 9 07:22:32 2009

Fixed Versions

All of the affected

Description

When I've said that this is a feature and not a bug, what I meant is that IE supports "PNG Gamma profiles". I've found a page that seems to talk about the topic: The Sad Story of PNG Gamma "Correction" by Henri Sivonen. The solution for our bug is simply removing those gamma profiles from your PNG images. Let's glance at the fixed demo:

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush_fixed.png) no-repeat center;
}

Our code stayed the same. What I did is "fix" the image using pngcrush program. At this point I'd like to point out that you can configure your editor to NOT save those gamma profiles in the first place. The editor that's being naughty and saves them by default seems to be Photoshop; I'm a happy Gimp user and I don't have problems with my PNGs, this also means that I cannot give you info on how to configure Photoshop to not to save those profiles.

Anyhow, pngcrush can also reduce the size of your images, so why not give it a go. The command I've used to "fix" the demo image is: pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush.png pngcrush_fixed.png. The explanation of the program's arguments is beyond the scope of this document - as always, RTFM

On Ubuntu pngcrush is available from the Universe repos: sudo apt-get install pngcrush.