Table default font size

MOH

Does font-size in a table default to 1em?

I have

body {font-size: 0.75em }

which works fine for everything on the page, except tables, which are displayed with a font-size of 1em in Firefox, IE and Opera and Chrome.

Firebug shows the <td> as inheriting the 0.75em from body, but the web developer toolbar shows the font size within the table at 16px as opposed to 12 everywhere else.

If I specify

table {font-size: inherit}

the font size is correct for FF, Opera and Chrome (but not IE, surprise surprise).

So I'm assuming <table> defaults to 1em?

Goodshape

Can't remember encountering that problem before.

Have you got Firebug? Useful for figuring out things like this --> http://getfirebug.com/

Liam Byrne

TDs seem to have their own rules all to themselves (imagine that - HTML following real-life Irish politices).

It also applies in some browsers to LIs and TEXTAREAs.

All other items seem to have an automatic "inherit".

Specify a different font, colour, or font-size and you'll see what I mean.

louie

try this

body, table {font-size: 0.75em; }
/* or you can set the table on its own */
table{font-size:0.75em;}
/*you can also have different td with its own font size */
td .large{font-size:1em;}
td .small{font-size:0.75em;}

MOH

louie wrote: »

try this

body, table {font-size: 0.75em; }
/* or you can set the table on its own */
table{font-size:0.75em;}
/*you can also have different td with its own font size */
td .large{font-size:1em;}
td .small{font-size:0.75em;}

Had tried that, but then the table content ends up as 0.75 of 0.75.

In fact, if I use

body{font-size: 0.75em; }
table {font-size: 1em; }

the table content is now the same size as the body content (in IE and FF anyway)

The table seems to be defaulting to a default text size, rather than it's parent, unless you explicitly specify 1em.

Goodshape wrote: »

Can't remember encountering that problem before.

Have you got Firebug? Useful for figuring out things like this --> http://getfirebug.com/

Firebug shows it as inheriting 0.75em from body

MOH

Bah! I found it - I'm an idiot (a bit)
It's legacy, it happens in quirks mode. I'd somehow deleted the line with my DOCTYPE declaration. Put it back in and it's working normally.

Somehow I missed this when I was googling last night:

Back in the old days of <font> tags the font size was not inherited
into tables. When CSS support was first added to browsers it was made
backwards compatible with <font> tags and so the font size was not
inherited into tables. This has been fixed in newer browsers, but they
still maintain a backwards compatability option, usually known as
"quirks mode". The browser decides to use quirks mode or standards
mode depending on the doctype, or lack of, on the page. Google for
"doctype switching".

mewso

A good css reset file might avoid these kind of problems. Meyer sets all font sizes to 100% but you could easily change it and re-use in all projects.

MOH

mewso wrote: »

A good css reset file might avoid these kind of problems. Meyer sets all font sizes to 100% but you could easily change it and re-use in all projects.

Thanks, that looks quite useful.


BTW, 'quirks mode' also means margin:auto on a fixed width container doesn't work in IE. On which subject, is it worth using 'text-align:center' on body and 'text-align:left' on my container div to make the page centred on IE5 and below, or can I assume the vast majority of IE users are at least on 6 by now?

mewso

Our site is at approx. 13% for IE5.5 which is pretty remarkable. I stopped testing below IE6 along time ago though. I would deal with issues if someone contacted us about it but I don't think it's worth supporting below version 6 anymore. Others might disagree. I know some people might have no option but to use IE5.5 or worse for whatever reasons but as I said I would try to sort out any issues if they contacted us and not before.