By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 921 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

Table cell font size not influenced by body style????

P: n/a
Hello everybody,

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

Oct 12 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a

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 <tableand 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

Oct 12 '06 #2

P: n/a
In article <11*********************@m73g2000cwd.googlegroups. com>,
xformer <ge*****@hotmail.comwrote:
...

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
Oct 12 '06 #3

P: n/a
On 12 Oct 2006, xformer wrote:
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.

Oct 12 '06 #4

P: n/a
On 2006-10-12, xformer <ge*****@hotmail.comwrote:
Hello everybody,

today I was working on a web site when I found a strange effect.
Take the following html document:
[snip]
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".
Oct 12 '06 #5

P: n/a
Hello John,

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

Oct 12 '06 #6

P: n/a
If I could post this to an externally visible web site I would have
done so.

I work on an intranet server and don't have access to an externally
visible web server.

Oct 12 '06 #7

P: n/a
Hi, Ben
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

Oct 12 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.