Page 1 of 1

CSS rules for font size within tables?

Posted: Wed Oct 20, 2010 7:52 am
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...

Re: CSS rules for font size within tables?

Posted: Wed Oct 20, 2010 7:59 am
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 :)

Re: CSS rules for font size within tables?

Posted: Mon Nov 22, 2010 10:42 pm
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.