CSS Font Size not inherited in IE tables

I recently came across a problem that I couldn't find a solution to. In IE6, IE5.5 and IE5 text within tables was not inheriting the font declarations from my CSS. I declared the font size on the body tag and for all other elements it works fine:

body
    {
    font: 72%/160%, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;    
    }

So off I went to find out what others had been doing. It took me a while to find the answer so incase it helps someone else find it I'm posting it up here.

One hack suggested using the !important declaration to redeclare the font size for IE6 and below. That would clog up my style sheet a bit so I wasn't impressed with that one.

Happily I found a much better hack. It works with just one line of code and the font size in my tables is now appearing correctly. To correct font-size in tables simple add this line to the css that controls your table:


font-size: 1em;

So my CSS for my table looks like this and it is now behaving properly.

table
    {
     border-spacing: 0;
    border-collapse: collapse;
    /* fix for IE6 and below not inheriting font size */
     font-size: 1em;     
    }

Comments

Lennert Luik Oct 16 2006

this indeed does the trick, thanks a lot!

David Hunter Jan 7 2007

Just an addition to this, if you are using percentage sizes you need to add the following to stop the fonts in any inner tables getting smaller and smaller:

table table{
font-size:100%;
}
alternatively avoid tables as much as possible :)

pd Jan 8 2008

here is a better solution:

http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_thread/thread/5833bab1baff74ea/6f440d31d11dae9e

apparently the browser is in “quirks” mode so you have to add a DTD definition to the top of your page to tell the browser to use the proper CSS inheritance rules as opposed to the screwed up implementation used in earlier browsers

Coder Jul 11 2008