Table cell font size not influenced by body style????
xformer
today I was working on a web site when I found a strange effect.
Take the following html document:
----begin----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Some title</title>
<STYLE type="text/css">
body
{
background: #FFFFFF;
font-family: sans-serif;
font-size: 75%;
color: #ff7030;
}
p
{
font-family: sans-serif;
color: #000000;
margin-top: 30px;
}
</STYLE>
</head>
<body>
<h1><a name="Header1">Some Header</a></h1>
<p>This is some paragraph</p>
<table border="0" cellpadding="10" cellspacing="0"
width="600">
<tbody>
<tr>
<td valign="top" width="30%"><font
color="blue"><b>blue</b></font></td>
<td valign="top">Explanation for blue</td>
</tr>
<tr>
<td valign="top"><font color="black"><b>black</b></font></td>
<td valign="top">Explanation for black</td>
</tr>
</tbody>
</table>
---end----
When you look at this you will see that the "paragraphed" text is
black and small as it should be since black is defined in the p css
part and 75% is defined in the body css part. The values in the 2.
column of the table are orange as they should be from the body css
part, but ... why is the text in the table larger than the text in the
preceding paragraph????
It looks like the table text gets it's colour from the body
definition but not the font size. I don't get this? Why is this so? Has
anybody an idea? IE6 and FF1.5 show the same behaviour.
Regards,
Frank
Andy Dingley
xformer wrote:
> It looks like the table text gets it's colour from the body
> definition but not the font size.
That's probably what happened. Probably because the default stylesheet
(or at least the result of the CSS cascade) applies a specific
font-size to <table> and possibly its children, rather than inheriting
the font-size from elsewhere (such as <body>).
To get the behaviour you expect, try this
table { font-size: inherit; }
This doesn't guarantee it in all cases - you'd have to do a bit more to
get that. You'd also need to read up on CSS, the use of "inherit" for
property values and particularly where its inherited from. Start here:
http://www.w3.org/TR/CSS21/fonts.html#font-size-props
JP. Baker
xformer <gem...@hotmail.com> wrote:
> ...
>
> When you look at this you will see that the "paragraphed" text is
>black and small as it should be since black is defined in the p css
>part and 75% is defined in the body css part. The values in the 2.
>column of the table are orange as they should be from the body css
>part, but ... why is the text in the table larger than the text in the
>preceding paragraph????
>
> It looks like the table text gets it's colour from the body
>definition but not the font size. I don't get this? Why is this so? Has
>anybody an idea? IE6 and FF1.5 show the same behaviour.
You are in quirks mode which is really a mistake; The browsers are
trying to give the same results that earlier browsers gave. If you
'correct' the DOCTYPE to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
they both behave as you would expect.
John
--
John P Baker
Andreas Prilop
> today I was working on a web site when I found a strange effect.
> Take the following html document:
>
> When you look at this [...]
"This" is a Usenet article.
Give the URL of an example page and don't post source text here.
Ben C
> Hello everybody,
>
> today I was working on a web site when I found a strange effect.
> Take the following html document:
> It looks like the table text gets it's colour from the body
> definition but not the font size. I don't get this? Why is this so? Has
> anybody an idea? IE6 and FF1.5 show the same behaviour.
If you add a style rule
table
{
font-size: inherit;
}
to your example
you get the font-size: 75% passed through to the tds, and the behaviour
you expect.
So it looks like the defaults for p are color: inherit and font-size:
inherit, but that the defaults for table are color: inherit but not
font-size: inherit.
For a td to inherit the font-size specified in the body, there needs to
be a complete inheritance chain all the way to body. Otherwise the td
(whose default font-size is I think inherit) stops at inheriting the
table's font-size, which is probably defaulting to "medium".
xformer
thanks a lot for your answer. Indeed, it works if I either
- switch from Transitional to Strict
- add "http://www.w3.org/TR/html4/loose.dtd" if still
Transitional
There is always something new to learn...
Regards,
Frank
xformer
done so.
I work on an intranet server and don't have access to an externally
visible web server.
xformer
Hi, Andy,
thanks for your answers.
Unfortunately, the "table { font-size: inherit; }" thing does not
work here. I have to add the "loose" definition to the transitional DTD
or switch to the strict DTD.
Regards,
Frank