Recently, we realized that some of the images on our site only showed incorrectly on the Windows version of Firefox. Some of the Firefox installations that we checked, it showed ok, some not. Digging a bit further, we realized that the problem stems from Firefox Image Color Correction being turned on by default. The problem only exacerbates itself when you have no control over the end-users Firefox Image Color Correction settings. There’s this posting at hacks.mozilla.org which accurately describes the problem and the solution. Fortunately the solution presented works perfectly. The tl:dr; of the page is this:

Firefox Image Color Correction

1) Download pngcrush (you’ll need to have gcc installed in order to properly compile it).

2) Run pngcrush in the command line with this command:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

This will strip any embedded color profile from the png file thus allowing you to upload it, and not have Firefox Image Color Correction try and interpret the true color images from the file itself.

Alternatively, if you’re a Windows user and don’t want to deal with compiling, etc. you can get TweakPNG here. You just have to remove the profiles manually however, to eliminate the Firefox Image Color Correction problem.

If you want to completely circumvent the Firefox Image Color Correction problem from happening you need to setup Photoshop or Fireworks to use the “sRGB IEC61966-2.1” working color profile in Edit->Color Settings. And then in order to view the color settings accurately for your particular monitor, you want to setup the proof to be your monitors color. In the case of the MacBook laptops, its the Monitor RGB. This is located in View->Proof Setup->Monitor RGB. This will keep your images as they should be so that you don’t run into Firefox Image Color Correction management issues. And if you still do, you can utilize one of the above mentioned tools to fix it and be on your way.

We recently had an interesting request from someone seeking a script which would allow them to rotate images on their site without the use of a database. They wanted something simple, yet powerful. The user had only one main caveat. They wanted the images to be wrapped in an anchor tag to allow it to be a link. Being a rather unusual request we came up with an easy to understand and implement solution.

Utilizing the free image rotation script

Utilizing just php and a text file, we created exactly what the user had wanted without any overhead of a database. If you’d like to download the free image rotation script, click the link below and extract the files to your server.

Per the documentation in the header, you can utilize this free image rotation script with little trouble. In the web site php file that you want to display the rotated image in, you will need at a minimum of 4 lines of code:

require_once('ImageRotation.php');
$img_rot = new ImageRotation();

// add each image to be in the rotation set
$img_rot->add('img_path','img_url');

$img_rot->display();

Download Free Image Rotation Script

We found an incredibly annoying feature in the webkit engine that basically re-styles the input boxes for a web page, such as the login form. I don’t mind that it enters in the saved form data, but when it messes with the color of my boxes, I tend to not like that.

Here’s the simple fix that we used to correct the problem:

input:-webkit-autofill{    background-color: #00b84e !important; }

We hope that this helps fellow developers and designers fix the issue of this “feature”