WTF?! Different colors...?!

[DrewDizzle]

This is probably a simple fix but I'm not seeing it and am getting frustrated.

http://www.drewdizzle.com/optimumhm/index.html

The colors are the friggin' SAME, yet are displayed as different in all browsers I've tried (IE, FF, and SAF). The colors for the menu are assigned in "css/menu.css" and are #505050. That's what they are in Photoshop for the small logo and the masthead as well. I'm baffled.

WTF?!

[jcdevelopment]

is the logo in RGB or CMYK?

[DrewDizzle]

Originally Posted by jcdevelopment

is the logo in RGB or CMYK?

already checked that... they're all in RGB

[_Aerospace_Eng_]

FF 2.0.0.12 PC seems to be displaying things correctly, as does Safari 3 Beta for PC. IE renders the color on PNGs slightly darker than they should be, this is because they got the gamma- and color-corrections incorrect. This is has always been an issue in previous versions of IE. According to my onscreen color picker the color in IE is #454545.

I use Pixie to pull the colors from the screen.

What you could do is use conditional comments. Add this after your main stylesheet in your html.

<!--[if IE]>
<link rel="stylesheet" href="iestyle.css" type="text/css" />
<![endif]-->

Then in iestyle.css add this

#menu {
	background: #454545;
}
#menu a {
background: #454545;
}

Also that height:1%; might effect other browsers. You should either use min-height or give that height to IE only.

More info on conditional comments.

[DrewDizzle]

PNGs aren't the problem. It's the menu (Home, Services, etc.) and the dropdowns.

[DrewDizzle]

as a temporary fix, i changed all the PNGs to GIFs, which display proper 505050. I'd prefer to use PNG or JPGs when this goes live because I have how GIFs pixel-ize the faces on the masthead. Thoughts?

[_Aerospace_Eng_]

The only browser that was displaying the pngs incorrectly is IE. Keep the pngs and use the fix I gave you. I don't see the problem here.

[DrewDizzle]

Originally Posted by _Aerospace_Eng_

The only browser that was displaying the pngs incorrectly is IE. Keep the pngs and use the fix I gave you. I don't see the problem here.

No because the problem is existent in Safari and FF on OS X. I'm sitting here looking at it.

[_Aerospace_Eng_]

You never mentioned that you were on OS X. On PC those browsers render everything fine.

[DrewDizzle]

Originally Posted by _Aerospace_Eng_

You never mentioned that you were on OS X. On PC those browsers render everything fine.

You're right... I thought I did but ended up editting that post. Odd that it renders fine on PC. I'm at a loss... I tried the #454545 fix and it didn't match her on Safari OS X.

[liorean]

Is the colour profile and gamma correction for the PNGs correctly set? Mac has a different default gamma than Windows, and I believe which colour profile a Mac has depends on whether it's CRT or TFT, where Windows uses the same colour profile all over.

(I believe there's some incompatibilities in some browsers when it comes to gamma correction and colour profiles. I can't recall if there's a best-fit option for either though, but I would expect sRGB and Gamma 1.0 to work best across the board.)

[DrewDizzle]

Originally Posted by liorean

Is the colour profile and gamma correction for the PNGs correctly set? Mac has a different default gamma than Windows, and I believe which colour profile a Mac has depends on whether it's CRT or TFT, where Windows uses the same colour profile all over.

(I believe there's some incompatibilities in some browsers when it comes to gamma correction and colour profiles. I can't recall if there's a best-fit option for either though, but I would expect sRGB and Gamma 1.0 to work best across the board.)

I'm happy to use JPG... was just using PNG out of habit. I hate having to use GIF because it distorts the images. Any ideas? How do other sites get around this?