Jason is frantically cutting up our alpha design for me to implement tonight, and he struck upon an extremely interesting issue. Well, extremely interesting now, but before around twenty minutes ago it was an extremely (insert your favourite swear word here) frustrating issue. This almost resulted in us avoiding PNGs in our layout entirely until some very clever member of the PocketSmith team found the solution.
PNG’s are a lovely thing – alpha transparency, awesome looking and consistent gradients, the whole shebang. Unfortunately we found an unfortunate side effect of using PNG images in web layouts just now – some web browsers do not play nice. This presented itself in Firefox and Internet Explorer, but not in Safari.
The issue was that the background colour of the PNG image did not match that of the overall background colour, which was set in CSS. This meant that although the image blended perfectly in Safari, this was not the case in Firefox and Internet Explorer.
Upon investigation, we found the solution in a little freeware tool called TweakPNG, which we were lead to by a blog post by Pixel Acres. All that has to be done to get the PNG image to blend correctly with the CSS colour is to set the gamma information for the PNG image to 0, or delete it – in TweakPNG this is is named “gAMA”. We set it to zero (kinda scared to delete it completely as per the Pixel Acres blog post) and this worked perfectly – blends well across the board.
Oddly, the issues that Pixel Acres were experiencing back in 2006 were related solely to Internet Explorer, not Firefox – perhaps there has been a change in PNG image handling with the releases of Firefox since this time?
Anyway, issue solved, thought I would spread the love with this post because it took way to long to find the solution, especially for an impatient fellow like myself.
Now I just have the battle with the consistently broken Internet Explorer box model to contend with 
Tags: Design
Dude, I love you! Thank you for posting this. I can’t believe how easy that was!
omg, this is haunted myself, my designer, and my business parter for days now!!
Havn’t tried the fix yet, but good to hear were not just going insane
Thanks,
Miles
No problems at all – pleased that this post has helped you guys out
Thanks!
I’m pleased by blog post on Pixel Acres was able to ease your frustrations! I notice you guys are based in Dunedin, which is where I studied way back when. PocketSmith looks like a very interesting app, good luck with it!
I edited the gama to 0 and the images in IE went to black, they were fine in firefox
Check that, I had to delete the line for it to work in IE