CODEWITHSUNDEEP
cssfirefoxsafaricross-browsergoogle-chrome
tonyf
tonyf

Reputation: 35557

Cross Browser Font/Color Issues - Chrome/Safari

My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.

Why might the fonts/color be different in Safari and Chrome - it looks like bold black.

Header style I am using within my content div, i.e.:

#content {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #990;
    border-bottom-color: #990;
    border-left-color: #990;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #FFF;
    width: 973px;
    text-align: left;
    display: block;
    background-image: url(images/bgcontent.jpg);
    background-repeat: repeat;
}


h1 {
    font-family: "Lucida Grande";
    background-color: transparent;
    height: 20px;
    width: 650px;
    color: #FF9904;
    font-size: 36px;
    text-align: left;
    float: none;
    vertical-align: top;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #999;
    letter-spacing: normal;
    margin: 0;
    padding: 0.5em 0;
}

I also found this link relating to Google Chrome, i.e about using:

@charset "xxx"

http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs

Upvotes: 1

Views: 11951

Answers (4)

Anon
Anon

Reputation: 339

At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.

Upvotes: 0

Timothy Armstrong
Timothy Armstrong

Reputation: 2042

I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.

Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.

Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?

Upvotes: 2

easwee
easwee

Reputation: 15905

The sample css you posted is ok. Try adding !important to color attribute.

color: #FF9904 !important;

Upvotes: 0

douwe
douwe

Reputation: 1315

Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.

But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose

Upvotes: 0

Related Questions