CSS rules for font size within tables?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

CSS rules for font size within tables?

Post by skylark2 »

I have the following in my CSS file to reduce the default font size:
body { margin:0; padding:0; font-size:76%;}
And then, for the legend
legend {font-size:1.1em; font-weight:bold; border-bottom:2px solid #fff; margin-bottom:15px; padding:6px; background:none; color:#fff;}
It works exactly as expected, except when I put things in a table. (Very basic layout, two fieldsets forced to be side by side in a single row, two column table). Then, I get what looks like the full size font.

I can get almost the right effect by adding
table { margin:0; padding:0; font-size:76%;}
...but how do I tell it to apply the special conditions for the legend when it happens to be within a table? To my lack of surprise, adding a condition for "table legend" to the first legend line didn't work.

Any suggestions? I'm pretty new to this, so please don't assume I've tried the bleeding obvious...
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: CSS rules for font size within tables?

Post by skylark2 »

Answering my own post here, but would love an explanation.

What works is adding
table { font-size:100%;}
This produces the same font size as I see for the body. Without that line, I get a much (you might even suspect 100/76, where 76% is the reduced size of the body font) larger font size.

This wins my "huh?" award for the day :)
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: CSS rules for font size within tables?

Post by Pazuzu156 »

If I may be of help, adding a % to a font size is not the best way to handle it unless it is a page header.

Use true size such at point(pt), like so:

Code: Select all

<style type='text/css'>
body, html {
color:#000000;
font-family:Verdana;
font-size:10pt;
}
</style>
This is the best way to handle font size, this can also be defines in a span style as well if you need to do so only to one word or letter within the html itself.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply