What the — ?

Problem: I want the navigation bar across the top of my site to look like tabs, with the currently selected tab in front. This was easy to acheive in Firefox, but IE was a little pesky. For some reason, it was rendering the colors all wrong.

p{text-align:center}. !{border: 1px #ccf solid; margin-right: 15px;} /images/colors-right-ff.png 165×90 (Correct colors rendered in Firefox.)! !{border: 1px #ccf solid;} /images/colors-wrong-ie.png 165×90 (Incorrect colors rendered in Internet Explorer.)!

As it turns out, IE displays PNG images slightly darker than it should (notice my header image is a little darker, too). I explicitly used #003366 in Photoshop when creating the background image, and the background color for the selected tab is also set to #003366 in my CSS file. IE curiously renders the background image as #00295a.

Solution: a quick and dirty fix — save the background as a GIF instead of a PNG. I much rather prefer the PNG format, so if anyone knows of a solution to this odd rendering issue, do tell.