Forum Moderators: not2easy
<style type="text/css">
<!--
body {font-family: verdana,sans-serif;
font-size: 14px;
color:#333; }
-->
</style>
</head>
<body>
<p>this is the right font.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td>this should be the same font but it is not. seems to pick up the family, but not the size.</td>
</tr>
</table>
</body>
</html>
What's the deal here? Seems like I'll have to set another style, but that seems redundant.
<style type="text/css">
<!--
body, td {font-family: verdana,sans-serif;
font-size: 14px;
color:#333; }
-->
</style>
>>certain browsers
I tried this in IE, Mozilla and Opera and they all showed the incorrect(?) font size. Shall I put this in the 'browsers don't interpret CSS correctly' file? It's the kind of thing that really tripped me up when learning CSS...
I was waiting for a CSS-guru type to answer this one :)
I'm waiting too! I picked up this tidbit of information here a while back. At the time, Opera was not displaying h tags based on my stylesheet rules. They were showing as times when they should have been verdana.
To avoid any future problems with the cascade, I now do this...
body, div, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, td, textarea, tr, ul
{font-family:verdana, arial, helvetica, sans-serif;}
That way I don't have to worry about any cascade issues. I make sure that I've listed all my used block level elements in that one general rule.
According to the spec, you should be able to specify the font for the entire document using the body class. But, as we know, things don't always work according to the specification. ;)
Did you miss 'a' from your list or do you not include it?
Never thought to include it. I know of two elements where the cascade has issues; h tags and tables. I haven't seen any issues with a elements but I might as well add that to the list.
I'm hoping one of the CSS Gurus will jump in here and give us specifics on which elements have problems with the cascade.
Actually it's an inheritance issue. I'm afraid I'm just not the human dictionary type so I can't remember which browsers do inherit correctly from the body tag and which dont.
I know this though: For maximum backward compatability I always style table elements (td,th,caption etc) explicitly and I never expect anything to inherit from the body tag. It's just one of those tricky areas ;)
Nick
font-size should inherit (see section 5.2.6 of [w3.org...] ). However, the spec says:
"Note that an application may reinterpret an explicit size, depending on the context".
So for example <h1> would inherit the colour, but doesn't inherit the size. It certainly would not be sensible for a heading to be the same size as the body text, although you could argue that it would have been sensible for the spec to be written such that headings are a proportion of the font-size of what they inherit from. Unfortunately it is not writtent that way, and instead gives quite a bit of freedom to the browser developer.
It seems that td's are similar to headings in this regard.
So, with:
body, div, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, td, textarea, tr, ulIts generally not the font-family that is the problem (except on old yukky browsers like NN 4.7). Its the font-size.
{font-family:verdana, arial, helvetica, sans-serif;}
Shawn
...didn't want to add the extra styles if I didn't need to.
Too true. Luckily, you don't need to.
Just style your table like this: table {font-size: 1em} and all will be well.
Set your doctype properly, and all will be well.
Got it in one drbrain :)
Above code works fine in 4.01 strict.
[rhetorical question] Why am I such a sucker for not setting a doctype when i'm testing things? [/rhetorical question]
Its generally not the font-family that is the problem (except on old yukky browsers like NN 4.7). Its the font-size.
Shawn, in the scenario I was working with, Opera was not displaying h tags in the specified verdana font. As soon as I added that general rule in my style sheets, the problem was solved.
it's not inheriting the font family only noticed it today having started to use O7.11 this week, never noticed it before..
Suzy
Have to agree here it's usually only tables that have a problem in some browsers but it seems like it's an Opera 7 bug :(
I caught onto it when I first downloaded 6.0 way back when.
but another thing to remember anyhow..
* {font-family: verdana, helvetica, arial, sans-serif;}
this would workaround all elements would it not?
*thoughts* maybe not a "bug" may just be Operas interpretation in that if headings should not inherit size, because that's sensible, than perhaps they're putting font-family in the same category? a lot of sites have their headings in a different font...
Thinking out loud
Suzy
Shawn, in the scenario I was working with, Opera was not displaying h tags in the specified verdana font
OK, thanks. I guess I never saw that for some reason.
Just to reiterate what Suzy wrote, in some circles there is a rule that print media uses a san-serif font for headings and serif'ed font for the body text. This is because it is faster to read a printed serif font, and you want the ausdience to read the body fast but to linger on the heading. For online media the rule is reversed because it is fater to read a san-serif font on screen.
Shawn
