Last updated Wednesday, Aug 16, 2006

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:

Estimated reading time: 1 minutes

Table of contents

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; 
}

Have an update or suggestion for this article? You can edit it here and send me a pull request.

Tags

• XHTML
• CSS

Recent Posts

• Using HashiCorp Vault with LDAP
  How to use HashiCorp Vault to setup an LDAP backed secret store with read-only access for users in groups and read-write access for specific users

• Linux and Unix xargs command tutorial with examples
  Tutorial on using xargs, a UNIX and Linux command for building and executing command lines from standard input. Examples of cutting by character, byte position, cutting based on delimiter and how to modify the output delimiter.

• Copy a file in Go
  How to copy a file in Go. The ioutil package does not offer a shorthand way of copying a file. Instead the os package should be used.