93 posts
  • 6 Years of Membership
  • Affiliate Level 5
  • Author Level 8
  • Bundle Boss
+10 more
its_level
says

Lately I’ve noticed the colors of a lot of websites look different in chrome and firefox. Has anyone else experienced this? Is there a fix?

Chrome Example:


Firefox Example:

3535 posts
  • Power Elite Author
  • Author Level 12
  • Trendsetter
  • United States
+13 more
sevenspark
Moderator
says

I think it has to do with the way the browsers handle color management and color profile support. These might provide you with some further insight:

http://bholley.wordpress.com/2008/09/12/so-many-colors/

http://code.google.com/p/chromium/issues/detail?id=143

Using embedded color profiles may be a partial solution if it’s important. See http://en.wikipedia.org/wiki/Color_management#Embedding

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says

If those buttons were made with CSS (rounded corners and gradients), it is likely just a difference in the way the different rendering engines handle it (in the same way that textareas or radio buttons look different across browsers). If you want it pixel perfect in every browser, use an image. I think it is worth the slight variation between browsers to do it in CSS , because it means you can change the style without going back to Photshop to make your changes.

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says

If you want it pixel perfect in every browser, use an image.

use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says


If you want it pixel perfect in every browser, use an image.
use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser

What about IE? ;)

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says



If you want it pixel perfect in every browser, use an image.
use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser
What about IE? ;)

use an image fallback, no need to load extra files/data(images) if you can do it with CSS

93 posts
  • 6 Years of Membership
  • Affiliate Level 5
  • Author Level 8
  • Bundle Boss
+10 more
its_level
says

If those buttons were made with CSS (rounded corners and gradients), it is likely just a difference in the way the different rendering engines handle it

They’re actually images rather than css. I pulled them from a theme here on themeforest. I’ve seen the same behavior on several websites, which leads me to believe it has something to do with the browsers. Link to the theme: http://themeforest.net/item/ambience-premium-wordpress-business-theme-/full_screen_preview/179383

@sevenspark. Thanks for the links. I’ll take a look and see if there’s a solution somewhere in there.

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says

doesnt look different for me are you on two different comps?

93 posts
  • 6 Years of Membership
  • Affiliate Level 5
  • Author Level 8
  • Bundle Boss
+10 more
its_level
says

doesnt look different for me are you on two different comps?

Nope. It could very well be an issue with my settings, but I’ve reset both browsers to their default settings and still have the same results…

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says

They look exactly the same in FireFox and Chrome on my computer

by
by
by
by
by
by