Supposing we wish to make all the text in the following construction a little smaller than the text of this paragraph:
I'm some text in TD.
  • I'm some text in LI within TD.

I'm some text in P within TD within TD (nested table).

  • I'm some text in P within LI within TD within TD.

The most straightforward means, using relative length units, would look something like this:

#id_of_table { font-size: .8em }

If you are using Internet Explorer for MacOS, or Opera for Windows, this works as it should. If, however, you are using Internet Explorer or release versions of Netscape Navigator for Windows, it does not:

I'm some text in TD.
  • I'm some text in LI within TD.

I'm some text in P within TD within TD (nested table).

  • I'm some text in P within LI within TD within TD.

You might say "but these examples are so contrived!". They are not. This very problem was encountered in the construction of a business-critical web interface for the ninth-largest company in the world. The ninth-hour solution was to retreat from using CSS for font-size modulation, and to use HTML's SMALL tags instead. Because most pages were table-intensive, and SMALL must be repeated within every table cell, the mean size of the pages increased by more than 25% - especially discouraging since loading speed was a major design goal.

We're declaring TD, P, and LI as .8em. You might guess, then, that all of these should be the same smallish size - indeed, it is common practice to use these selectors to cover for Netscape 4.x's habit of forgetting who its parents are. Nesting TD, P, and LI in various ways, however, produces various differing results, depending on the inscrutably brain-damaged notion of style inheritance through the parse tree coded into most browsers.


I'm text right out in BODY. I should be 1em (100% of your default).

I'm P text. I should be .8em like the introductory paragraph.

  • I'm LI within TD. I should therefore be .64em (.8*.8em).

I'm P within TD within TD (nested table). I should therefore be .512em (.8*.8*.8em).

  • I'm P within LI within TD within TD. I should therefore be .4em (.8*.8*.8*.8em).

  • I'm LI within TD. I should therefore be .64em (.8*.8em).

I'm P within TD within TD (nested table). I should therefore be .512em (.8*.8*.8em).

  • I'm P within LI within TD within TD. I should therefore be .4em (.8*.8*.8*.8em).

Internet Explorer 4.x for Macintosh is the only browser I've encountered that correctly handles the inheritance, making most of the text on this page completely illegible: oops.gif.

You might say "well, I don't use P tags and UL/LI and all that twitchy nested "structural" stuff." But do you ever nest tables? Say, for layout?