473,326 Members | 2,655 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

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

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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Jon | last post by:
Hi, I have table text set to 85%, I may change that to em's but for now haven't If I have a table nested within the table I get font size of 85% of 85% = 72% - too small. Without...
16
by: Coder Droid | last post by:
I'm trying my first table-less site, and I've bumped my head up against a wall. I can't change the font size within a div. Real quick, my style sheet has: -------------------------------------...
2
by: chart43 | last post by:
Anyone working on a Mac and not setting any font-size at body level or even p level in their linked css but finding that while sites look good on one's own screen they look too big on Windows...
6
by: Bill | last post by:
I am trying to figure out how to do page layouts using tables (obviously not my background). If I have, say, a 5x5 table defaulting to20px wide per cell, why can't I make the cell in, for example,...
1
by: Achim Domma (SyynX Solutions GmbH) | last post by:
Hi, is there a possibility to set the font size to a percent value of the "top level" font size? For example: The font size of the body might be 100% and I have a div which should have a...
7
by: Daniel Kaplan | last post by:
I have the item below at the top of my style sheet. And it seems that the font-szie is ignored. I know that my linked style sheet is being read, and used because if I remove the font-family line,...
1
by: simmy | last post by:
I am pretty new to javascript and working with layers and have searched but found no answer to the following questions: How do I Position a layer relative to a cell in a table? Also how can I set the...
3
by: =?Utf-8?B?dG9t?= | last post by:
Hi All, I have a theme with a Style.css in which I have defined a style rule for the body element : body { min-width: 780px; margin: 0; padding: 0;
4
by: shapper | last post by:
Hello, I have been reading a few articles about font sizing and I get various versions. All them say to use em ... ok that is what I use. But then they differ on the text size "initialization"....
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.