Why does font-size not inherit ?

nrussell · Apr 26, 2005

I'm new to CSS - but according to the W3C specs, font-size applies to all elements and is inherited (

http://www.w3.org/TR/REC-CSS1#font-size)

If this is the case, how come my code does not observe font-size when I put it against the body tag ?

Any help with this very much appreciated,
Thanks

Nathan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Thud!</title>
<style type="text/css">

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<table width="770" height="100%" border="1" cellpadding="0" cellspacing="0">

<tr>
<td height="150" width="33%">
Logo Here
</td>
<td width="33%">
QPoll Here
</td>
<td width="33%">
Q Cart
</td>
</tr>


<tr>
<td height="*" width="33%">
Navigation
</td>
<td width="66%" colspan="2">
<p>
<h1>Heading</h1>
main content
</p>
</td>
</tr>

</table>


</body>
</html>

BillyRayPreachersSon · Apr 26, 2005

Font and other attributes are not always inherited when tables are being used. You will specifically have to set the font size for the cells, too:

Code:

body, td {
   font-family: Verdana, Arial, Helveta;
   font-size: 12px;
}

Incidentally, shouldn't "Helveta" be "Helvetica"? You should also specify a generic font family, such as "sans-serif" as well as real font names, in case none of the real fonts are found.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

nrussell · Apr 27, 2005

Thanks Dan, but are there some 'rules' to follow ?

"Font and other attributes are not always inherited when tables are being used"
Whilst I understand what you are saying, and I can see that this would work in this case; it all seems a bit hit and miss - do you know of anywhere on the web, or a good book, that definitively explains which elements inherit and which ones dont - and more importantly, why !

Cheers

Nathan

PS. Yes, "Helveta" should have been "Helvetica" !! - thanks !

ChrisHunt · Apr 27, 2005

The problem is that browsers aren't following the W3C specs on your page, because they're rendering it in "quirks mode". If you specify a full doctype:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

you'll find that font sizing works as expected in both IE6 and more modern browsers (though be warned that <table height="100%"> doesn't work as you want it to in standards-compliant mode).

You might still consider Dan's suggestion so as to work for older browsers like IE5.x, I'd do it like this:

Code:

body, th, td, p {
   ... generic properties here ...
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

BillyRayPreachersSon · Apr 27, 2005

There are no rules - font-size inheritance should work for tables, but doesn't due to bad implementation by browsers.

To quote from my O'Reilly CSS (2nd Edition) book by Eric Meyer:

Eric Meyer said:
Thanks to problems in various browser implementations, an author cannot reply on inheritance to operate as expected in all circumstances.

Eric goes on to say that NN4, and even IE4 and IE5 have issues with inheritance and tables, and so tricks such as the one I gave above should be used as a work-around.

Of course, you should only use that trick if your font sizes are absolute sizes... if you use relative sizes, you may end up with very small, or very big text, unless you look at re-structuring your CSS.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why does font-size not inherit ?

nrussell

Technical User

BillyRayPreachersSon

Programmer

nrussell

Technical User

ChrisHunt

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor