Browser Hex color accuracy

[TeviH]

Hey folks,

I'm working on a new site and I've run into something I've run into before, but I've never asked anybody about it. I have a background image that must blend into a background color. The hex value I got from Photoshop from using the color picker works great - in Firefox. Firing up Internet Explorer, 6 or 7, the image is rendered differently, and you can see the seam where the hex value hits the background image. I took a screen shot of the IE rendering and when using the photoshop color picker, got a completely different hex value! Plugging that hex value into the css made everything look dandy - in IE only.

small note - the screen shot of Firefox looked like the original image I had created, while the screenshot of IE made the image look darker than I had originally created.

Here's the wip link. The seam is noticeable in the last panel on the right siderail. Look at it in Firefox vs IE.
http://headlinercreative.com/archive/skokie kollel/web/

The hex value that works in FF: 691616
The hex value that works in IE: 5E1111

I can certainly make conditional comments, but I'd like to avoid that. What's going on? Should I be making my images using a different color profile or something? How can I fix this elegantly?

Thanks!

 

[gaucho1976]

Hey folks,

I'm working on a new site and I've run into something I've run into before, but I've never asked anybody about it. I have a background image that must blend into a background color. The hex value I got from Photoshop from using the color picker works great - in Firefox. Firing up Internet Explorer, 6 or 7, the image is rendered differently, and you can see the seam where the hex value hits the background image. I took a screen shot of the IE rendering and when using the photoshop color picker, got a completely different hex value! Plugging that hex value into the css made everything look dandy - in IE only.

small note - the screen shot of Firefox looked like the original image I had created, while the screenshot of IE made the image look darker than I had originally created.

Here's the wip link. The seam is noticeable in the last panel on the right siderail. Look at it in Firefox vs IE.
http://headlinercreative.com/archive/skokie kollel/web/

The hex value that works in FF: 691616
The hex value that works in IE: 5E1111

I can certainly make conditional comments, but I'd like to avoid that. What's going on? Should I be making my images using a different color profile or something? How can I fix this elegantly?

Thanks!

welcome to the magical world of IE! :hehe:

sadly, there's nothing you can do exception made of teh conditional comments or this little trick: instead of using a color background, just use a 1px background with the color you like. that way you won't need conditional comments and both IE and FF will have the bg looks seamless. Of course they'll have different colors across different browsers, but at least they'll look OK on both (keep in mind IE can't do anything right)

 

[TeviH]

In the past, that had been my solution, although for this, it won't work, since it already has a background image (no-repeat, positioned bottom). Can't wait for CSS3...

Another option would be to make a bigger background image. I was really asking to see if there was a problem with my image creation technique, or if there is more to know about browser color rendering. If not, there are a couple ways to get the result I want...

 

[gaucho1976]

In the past, that had been my solution, although for this, it won't work, since it already has a background image (no-repeat, positioned bottom). Can't wait for CSS3...

Another option would be to make a bigger background image. I was really asking to see if there was a problem with my image creation technique, or if there is more to know about browser color rendering. If not, there are a couple ways to get the result I want...

no, it's a browser rendering problem. As you mentioned, you can just build a 100% width div and insert your current content. As for CSS3, most CSS3 properties will be accepted by most browsers (being Safari the most advanced since it renders all of them right now and FF has announced it for January 2009), however, IE will continue being crap, they already announced they have no intentions of adapt their browser to CSS3, at least in a near future

 

[beaver6813]

If you already have a background a simple solution is to make the main background the 1px colour blocks, make that the main container, put everything in it (set width, height to 100% etc) then put the gradient part bit inside the main container... if that makes sense