Question

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

Answer 1

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?