Welcome to WebmasterWorld Guest from 54.167.110.211

Forum Moderators: incrediBILL

Message Too Old, No Replies

CSS H4 Format NOT Working in FireFox

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

New User

5+ Year Member

joined:Dec 23, 2009
posts:5
votes: 0


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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 952
votes: 4


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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


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)

New User

5+ Year Member

joined:Dec 23, 2009
posts:5
votes: 0


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 ;)

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4986
votes: 12


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

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

New User

5+ Year Member

joined:Dec 23, 2009
posts:5
votes: 0


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members