Huge Text Inside Tables on IE5/5.5 | May 14, 2004

It's been known for quite a while that IE5/5.5 ignores text sizes applied to the body tag, inside tables. Doing a search on this issue comes up with a few solutions, mosty involving the use of IE5/5.5 specific hacks. However there is a much, much easier solution. Simply set the font-size for tables to 1em.

body {
	font: 76%/1.6em Verdana, Arial, Helvetica, sans-serif;
}

table {
	font: 1em Verdana, Arial, Helvetica, sans-serif;
}

It's neither clever or sexy, but may be of use to somebody.

Posted at May 14, 2004 4:36 PM

Comments

Pieter said on May 14, 2004 5:10 PM

I always use something like:

[code]
body { font-size: 76%; }
table { font-size: 100%; }[/code]

Pete F. said on May 14, 2004 5:42 PM

Stumbled across this ‘gem’ whilst coding not 15 minutes before reading this, so your tip has helped me.

Thanks Andy.

Ste Grainer said on May 14, 2004 6:20 PM

How timely! I was literally just wondering if there were a way to fix this problem without resorting to hacks… fantastic! And I was just thinking I might have to switch back to using divs/CSS to lay out this tabular data. ;)

Alun said on May 17, 2004 11:32 AM

Whereas I found this out 2 years ago, you should have asked! ;)

Sorry, that sounds a bit uppity. There seem to be a lot of these little ‘obvious’ hacks that people might never share because they thought everybody else already knew. Like using border-collapse: collapse instead of cellspacing, which seems to have eluded Dave Shea until this point. I wonder how many more are floating around out there?

ben said on May 18, 2004 2:15 AM

or

body, table tr td {
font: 76%/1.6em Verdana, Arial, Helvetica, sans-serif;
}

Marc said on May 19, 2004 3:51 PM

Thanks, that was certainly useful to me.

Marc said on May 19, 2004 3:51 PM

Thanks, that was certainly useful to me.

Bill said on November 4, 2005 12:33 AM

That’s because tables don’t inherit font information. Notice the same behavior in Mozilla and Opera. Thus, for once, Internet Exploiter is not to blame. :)

To reduce redundancy in your CSS, you /could/ do this:

table { font: inherit }

But, as you’ve come to expect by now, Internet Explorer doesn’t support “inherit” (at least, not on this property), so forget that.

Dan Eastwell said on February 7, 2006 10:38 AM

Useful to me, Andy! Nice to see a solution that isn’t a hack, and is one line long and actually works!

Thanks.