Scott Hanselman

If you're not reading this post in a feed aggregator you can tell that Alexander and I collaborated on a new design over the weekend. (Yes, he was paid.)

By "collaborated" I mean that Alexander is awesome and I learned a bunch of obscure browser-specific nonsense that I didn't know before. I thought that at least some of these problems were fixed by 2007. Oy, what a mess.

I was looking forward to using PNG on this site, and it's the One True Format, right? You'd thing it'd be a no-brainer.

We put that brown background in the header in a div, as a background-image.

<style type="text/css">
#header1 {
height: 79px;
background: url(header-background2-gamma.png) scroll no-repeat;
background-color: #5C4837;
background-position: right 50%;
} 
</style>

The original design was fixed in width, so we made it fluid and stretchy. Because the header is a fixed weight, I wanted it to be right-aligned. It's aligned via background-position to the right.

In order to make it stretchy, I made the background color match the left edge of the graphic. This technique worked great in FireFox, but looked lousy in IE6 or IE7. You can see a rendition below or visit a sample page. If you're running IE, you'll see a graphic like the one seen below. If you're running Firefox, you'll see two identical bands.

Nutshell - PNGs look darker on IE than anywhere else. Even IE7 Release!

What different is that, as you probably know, IE doesn't seem support the Gamma Correction data that is added by most PNG-producing applications. Or, it supports it too well! :)

Not only is there crappy PNG support out there, as most don't completely implement other very interesting parts of the spec, like Color Correction, but the spec itself was apparently ambiguous for a number of years.

I went around and collected this bunch of links...

• The Sad Story of PNG Gamma "Correction"
• PNG Home Page
• TweakPNG - Low-Level PNG modifier
• Fixing PNG Gamma
• SitePoint on PNG Colors in IE
• A 2005 Blog Post by Sam Fortiner, the IE Dev who wrote Transparent PNG Support in IE7
• Free Virtual PC Image with IE6 - for testing purposes.
• IE PNG Fix (as an HTC/IE Behavior)
• Details on this fix
• A Javascript IE PNG Fix
• PNGGauntlet - A .NET Program that fronts Ken Silverman's PNGOut 
• You'll definitely want these. I run it in a loop in PowerShell:
  dir *.png | foreach-object { pngout $_ }
• The 2003 Joint PNG Spec
• Problems with 8-bit PNGs in IE

The real frustration for me here, is why should I still care about this stuff? It should be WAY easier...I wonder when the larger problem of color on the web will be solved. I'm really frustrated and a little shocked that I'm still having to sweat this kind of detail these days.

Big thanks to Jon Galloway for helping me figure this out and remove the Gamma Correction from my PNG.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By