PDA

View Full Version : CSS Font Color Rendering Problem


adachi
03-26-2008, 02:35 PM
The following code will not render the proper font color in Firefox or Netscape, but works fine in IE.

<p style="color:#9F4D21; font: bold 20px/1.5em verdana, sans-serif;">DON'T FORGET OUR EVENT ON</p>

If you lower the font size to 16px or lower it works fine.

<p style="color:#9F4D21; font: bold 16px/1.5em verdana, sans-serif;">DON'T FORGET OUR EVENT ON</p>

Anyone know what is going on or if there is a workaround?

Any help is greatly appreciated.
ran_dizolph
03-26-2008, 03:32 PM
Perhaps take your font elements out of shorthand to see if it works properly...that's what i'd check first.
Dubbya
03-26-2008, 04:02 PM
Try changing the style to this:

<p style="color:#9F4D21; font: 20px/1.5em verdana, sans-serif; font-weight:bold;">DON'T FORGET OUR EVENT ON</p>
adachi
03-26-2008, 04:05 PM
I've tried all variations, but for some reason going from 16 to 18px forces the color to change to blue only in Firefox and Netscape. If I use a different hex color then it will work in some instances, but certain colors ranges still change to blue.

The orange used in this instance goes with an overall marketing color pallete so I don't have an option to change it.
DrayScherm
03-27-2008, 04:29 PM
I created this style in the head of the an html doc:

<style type="text/css">
<!--
.dontforget {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #9F4D21;
}
-->
</style>

I then applied it to the text DON'T FORGET OUT EVENT ON with this code:

<body class="dontforget">

It worked fine in IE 6 and Firefox 2.0.0.12.

I did not include the /1.5 em which Dreamweaver told me was not supported syntax.

...Duane
Orion
03-27-2008, 04:42 PM
doing it in long hand font-size:1.5em; should work just fine.. px should never be used for fonts. ems is the correct syntax for font size.
DrTandem1
03-27-2008, 08:28 PM
Both look the same in my browsers (a shade of brown). Maybe it's your monitor?
adachi
05-30-2008, 05:44 PM
So finally figured it out. There is a bug with Firefox and Catalyst drivers which cause the font colors to render incorrectly.

Web site colors are wrong (http://support.mozilla.com/en-US/kb/Web+site+colors+are+wrong#Blue_text_shows_as_red)

Turning on Cleartype fixed it.
PosterManiac
06-01-2008, 01:03 AM
So finally figured it out. There is a bug with Firefox and Catalyst drivers which cause the font colors to render incorrectly.

Web site colors are wrong (http://support.mozilla.com/en-US/kb/Web+site+colors+are+wrong#Blue_text_shows_as_red)

Turning on Cleartype fixed it.

Thats exactly what I was about to suggest . I had encountered this problem as well once. Had taken me a lot of googling before I found the solution :)