Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

CSS H4 Format NOT Working in FireFox

6:18 pm on Dec 23, 2009 (gmt 0)

5+ Year Member

Hi all,

I have been all afternoon trying to find whats wrong, but I have juyst give up...

It doesnt make sense...

I have this format for headers in my CSS File:

h1 {font-family:verdana, mono; font-size:20px; color:#ff8c00; background-color:#ffffff; font-weight:normal;}
h2 {font-family:verdana, mono; font-size:19px; color:#ff8c00; background-color:#ffffff; font-weight:normal;}
h3 {font-family:verdana, mono; font-size:18px; color:#ff8c00; background-color:#ffffff; font-weight:normal;}
h4 {font-family:verdana, mono; font-size:12px; color:#ff0000; background-color:#ffffff;}
h5 {font-family:verdana, mono; font-size:11px; color:#4d4d4d; background-color:#ffffff;}

All Headers appear correctly in Firefox, except for the H4 Format, which I dont understand why...

Can someone with Firefox confirm me that H4 appears in Black?
And WHY is that?

I have been picking screenshots from browsershots, and all Firefox versions give that header in black...

Thanks in advance

8:07 pm on Dec 23, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi there nunoand99,

in my test the h4 element had the color #ff0000 as expected. ;)

Without seeing your full HTML document and CSS file it is difficult
to say why you are you are having this problem.


10:33 pm on Dec 23, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Validate your code (both the markup and the stylesheet) to make sure you're not missing a closing bracket or tag.

Incidentally, you should add a generic font family to your list so the browser knows where to fall back if neither "Verdana" nor "Mono" is installed. Or if that is your intent with "mono," the correct family name is "monospace" although if the base typeface is Verdana, perhaps it should actually be sans-serif.

7:16 pm on Dec 28, 2009 (gmt 0)

5+ Year Member

Thanks for your answers..

I found out what was going wrong, and I must say Firefox is getting me nuts (although its only little details, I am a detail kind of guy).

For what was my inicial problem, I found out that, in all browsers (many versions tested), in all platforms, only in Firefox this does happen!

Firefox makes a diference between:

<FONT ...>
text here
<H4>title here</H4>
text here


<FONT ...>
text here>
<H4>title here</H4>
<FONT ...>
text here

GRrrrrrr (OK, I still use FONT tag, my fault)

Regarding the font family, I though that "verdana, arial, mono" gave a 100% coverage, although I dont have arial.

Doesnt it?
I have to write monospace?
I am pretty sure (I guess) that back in the 90's that wold give a 100% coverage


Best regards ;)

4:17 pm on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Firefox is behaving correctly.

h1, h2, h3, h4, h5, and h6 are BLOCK level elements. The font element can contain only inline elements, as per the HTML Spec and DTD [w3.org]. Therefore, this:

<FONT ...>
text here
<H4>title here</H4>
text here

Is invalid.

As for font families, verdana and arial fonts are both in the sans-serif family of fonts, NOT in the monospace family. And no, putting just "verdana, arial, mono" would not give 100% coverage. "verdana, arial, sans-serif" would probably be a more ideal grouping. (for more on font families: [w3.org...]

9:31 am on Dec 31, 2009 (gmt 0)

5+ Year Member


Thanks a lot.

All were very open minded answers ;)

Made me think and get to new worlds :)

Opening another thread about FORM formatting in Firefox.

See Ya


Featured Threads

Hot Threads This Week

Hot Threads This Month