CSS/TABLE Element Rendering Problems -- Netscape 4:
TABLEs within DIV Elements

Example 1 -- TABLE within a DIV (table1.html, listing)

This example consists of a DIV element, containing three components: a paragraph, followed by a small table, which is in turn followed by a paragraph. These elements are all contained within a DIV of CLASS="main". The CSS stylesheet rules are:

BODY        {font-family:  arial;  font-style: italic; color: blue; }
DIV.main    {margin-left:  25%;
             margin-right: 0%;
             text-align:   center;
             font-weight: bold;}
DIV.main TD {background-color: #dddddd; }      

So that the default BODY-content font properties call for blue, italicized arial text, while the DIV calls for a left margin of 25%, boldfaced text that should be centered between the margins. Finally, the Table cell rule calls for a gray background to cells within tables lying within the DIV. In this example, the table element takes a single attribute -- BORDER --, so that the table borders are displayed.

The rendering of this table is as expected: the first paragraph, the table, and the second paragraph are all rendered centered between the left and right margins imposed by the DIV. Note, however, that the table text content ignores the properties set for the DIV and BODY: Netscape's documentation states that this is correct for the Netscape CSS rendering model -- with Netscape, the table element does not inherit formatting instructions from the parent elements, in keeping with "historical behavior." Thus, this behavior is documented, although it is in conflict with the CSS recommendations, which state that such properties should be inherited.

Example 2 -- A Wider TABLE within a DIV (table2.html, listing)

However, this rendering breaks down if the TABLE is wider than the space between the left and right margins of the DIV. Starting with Example 1, this can occur by adding content to the table cells, as has been done for Example 2. Now, provided the table fits between the margins (that is, there are no line breaks within a table cell) then the table is still centered within the DIV, as in Example 1. However, should the table be wider than the margins, leading to a line break in one of the cells, then it is no longer centered within the DIV, and is instead centered between the left and right window borders, ignoring the margins set by the DIV. In addition, the paragraph following the table no longer inherits the properties of the containing DIV, and is instead rendered in a non-bold font and left-adjusted with respect to the window borders, ignoring the margins, alignment and font-weight ettings of the parent DIV.

Note how, in Example 2, that the reader can switch back and forth between these two behaviors, simply by resizing the window such that the table either does or does not fit inside the DIV margins.

Example 3 -- A TABLE within a WIDTH Attribute (table3.html, listing)

This third example takes the document in Example 1 and makes one small change: the TABLE element is assigned the attribute WIDTH="40%." The resulting misbehavior is even worse. In this case, the table is centered between the left and right window borders, ignoring the DIV margins even though the table could easily be centered between them. The problems are even worse for the paragraph followint the table. Here, the text is left-aligned to the browser borders, ignoring the DIV margins, text alignment and font-weight settings. However, even worse, the paragraph also ignores the font settings set for the BODY element (blue, italicizes arial), and is instead rendered using the browser's default font.