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:
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://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
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.
fillerspace saidIf 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
OrganicBeeMedia saidfillerspace saidIf 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?
fillerspace saidOrganicBeeMedia saidfillerspace saidIf 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
fillerspace saidIf 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.
doesnt look different for me are you on two different comps?
OrganicBeeMedia saiddoesnt 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…
They look exactly the same in FireFox and Chrome on my computer
fillerspace saidThey look exactly the same in FireFox and Chrome on my computer
The screenshots that I posted in the thread? Or the buttons in the actual website?
23andwalnut saidfillerspace saidThey look exactly the same in FireFox and Chrome on my computer
The screenshots that I posted in the thread? Or the buttons in the actual website?
Sorry, I should have made that clear…the button looks the same when I visit the actual website in different browsers. The two images you posted do look different, so the problem appears to be on your computer. Try disabling all FireFox addons to see if that fixes it, since that is the browser that looks the worst based on your screenshots.
fillerspace said23andwalnut saidfillerspace saidThey look exactly the same in FireFox and Chrome on my computer
The screenshots that I posted in the thread? Or the buttons in the actual website?
Sorry, I should have made that clear…the button looks the same when I visit the actual website in different browsers. The two images you posted do look different, so the problem appears to be on your computer. Try disabling all FireFox addons to see if that fixes it, since that is the browser that looks the worst based on your screenshots.
I should have been clearer too the images post here look different but when I look at the template with different browsers they look the same
I never had any issue with color difference in browsers. (EXCEPT IE). IE may change shades to some extent.
The only issue I have is with different monitors. I use LG Flatron CRT monitor for designing. And when I view the same design on my HP Laptop, all the shades below 10% of that color are invisible. i.e. if I give a box shadow of 10-20% black, it will hardly be visible on a laptop screen. Colors tend to loose their contrast and saturation.
I would like to know from fellow Authors, which monitor screens you prefer? LED, LCD, TFT, CRT etc.