Hi,

Hoping someone can assist as to what I maybe doing wrong as my css (style) 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.

Can anyone pls assist as to why the fonts/color are 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

Thanks.

2 answers

1
point

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?

Answered over 6 years ago by Timothy Armstrong
  • You should use Litmusapp.com for browser AND HTML email client testing. They rock (and they are the proud owners and developers of Doctype, which we all know and love) Gary Hepting over 6 years ago
0
points

Solution was is that I simply placed my css in one file instead of having it in several files. Thanks for the response Timothy.

Answered over 6 years ago by Tony Tonen