CSS Font Color Rendering Problem

adachi · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 03-26-2008, 04:02 PM

Try changing the style to this:

Code:

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

adachi · #4 (**permalink**) 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 · #5 (**permalink**) 03-27-2008, 04:29 PM

I created this style in the head of the an html doc:

<style type="text/css">

</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 · #6 (**permalink**) 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 · #7 (**permalink**) 03-27-2008, 08:28 PM

Both look the same in my browsers (a shade of brown). Maybe it's your monitor?