Fixing Table Inheritance in Quirks Mode

Summary: When in quirks mode, Gecko-based browsers will appear to ignore inheritance of font styles into tables from parent elements. Find out why this happens and how to fix it in documents that have to remain in quirks mode. In version 4 browsers such as Netscape Navigator 4.x and Internet Explorer 4.x, tables generally "broke" the inheritance of font styling. If the author had set a font size on the body element, for example, the font size of text within a table would match the user's default, not the body style. This led to a number of workarounds which were designed to cater to these bugs, and also to Gecko-based browsers emulating the behavior in some cases. Fortunately, the behavior can be overcome in all cases with a single CSS2 rule.

Tables and Inheritance

In CSS terms, tables are like any other element when it comes to inheritance. If a CSS property can be inherited, then table elements and their components (tr, td, etc.) should inherit just as any other element would. For example, if an author writes:

<style type="text/css">
body {font-size: 11px;}
</style>

...then the text inside table cells should also be 11 pixels in size.

Browsers from the version-four era, however, treated tables differently. In these browsers, a table's text would be the same size as the user's default settings, regardless of the CSS assigned to ancestor elements such as body. This represented a violation of CSS inheritance rules, and led many authors to create workarounds such as:

<style type="text/css">
body, table, td {font-size: 11px;}
</style>

Recreating Legacy Behavior

To avoid "breaking" older pages that were authored with old-browser behaviors in mind, Mozilla and related browsers will mimic old browsers when in "quirks" mode. To do this, the Gecko rendering engine uses the following rule in the <tt>quirk.css</tt> user agent file:

/* Quirk: cut off all font inheritance in tables and captions except for family. */
table, caption {
  font-size: -moz-initial;
  font-weight: -moz-initial;
  font-style: -moz-initial;
  font-variant: -moz-initial;
}

This rule sets all aspects of a table's font, except for the font family, to match the user's preferences setting, thus emulating the behavior of old browsers. This only happens when Gecko is in "quirks" mode; in "standards" mode, all styles are inherited by tables as permitted by the CSS specification. In those cases where it is necessary to author documents in "quirks" mode, but the breaking of table inheritance is not desired, authors can use Gecko's standards support to overcome the table-font rule shown above.

The value -moz-initial is a proprietary value used to apply the user's (or browser's) default setting for a given property to an element. Because it is not actually part of CSS, it is marked with the prefix -moz- in order to avoid confusion about what is or isn't part of CSS.

Overcoming Legacy Behavior

All that is needed is a rule that overrides the -moz-initial values with the CSS2 value inherit. This value is used to force an element to use the same value as its parent element for a given property.

/* Rule to fix quirks-mode inheritance behavior */
table, caption {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
}

This rule will override the rule in <tt>quirk.css</tt> and thus allow the author to have reliable inheritance of font styles into tables when in "quirks" mode. It is also fully valid CSS2 and so will validate without incident.

Recommendations

• In situations where authors must put a document into "quirks" mode but wish to enforce correct font inheritance into tables, use the demonstrated rule.

Related Resources

• Mozilla's DOCTYPE sniffing