CSS H4 Format NOT Working in FireFox

[nunoand99]

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

[birdbrain]

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.

birdbrain

[choster]

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.

[nunoand99]

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>

From:

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

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

Please...

Best regards ;)

[Fotiman]

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
</FONT>

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...]

[nunoand99]

OK

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