Doc Steve
Web Coding Service

Fully Accessible Web Code, Custom Written by Hand
Specializing in html, xml, css, and U.S.§508

Web Technical Pages

[ Technical Pages Home ]

IE/NS Issues Pages

IE 6 Cascade Demonstration:
CSS Inheritance

The Problem

The issue appears to be that in some versions of IE 6, but not in all versions, that CSS properties are inherited into tables. When tables are nested (as is often done) and the nested table is contained within a table data element (<td>) with an attribute of "center" (i.e., <td align="center">), then that attribute is inherited by the nested tables, and all of their <td> elements then default to centered instead of left, which is the "normal" default. The issue seems to have been centered on versions of IE6 that shipped with MS Windows 2000; versions shipped with MS Windows XP do not appear to behave in this way.

Why It Is A Problem

No other version of a browser that I know of (not IE up through 5.x, not NS up through 7, not Mozilla 1.x, and not all IE 6) inherit that way. This is similar to the inconsistent manner of centering elements using CSS (see Centering Block-Level Elements in Strict DTDs).

But "WE" Do Not Use Style Sheets

"We" may not, but the browser does, its default style sheet, and it formats pages based on that style sheet as overridden by subsequent style information (first) from the user and (second, which overrides the user) by the author of the document.

Where It Is Coming From

Obviously I can only offer some conjecture on this topic, but I believe that the affected versions of IE6 may not be performing incorrectly, but are performing oddly. Note the following quote from the W3C specification on inheritance:

6.4.4 Precedence of non-CSS presentational hints

The UA may choose to honor presentational hints from other sources than style sheets, for example the FONT element or the "align" attribute in HTML. If so, the non-CSS presentational hints must be translated to the corresponding CSS rules with specificity equal to zero. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules.

So, the "hint" that we are giving it is to style the <td> element as centered, which is then interpreted as a style definition and then that style inherits down to the nested tables. Also,

16.2 Alignment: the 'text-align' property

[N]ote that since 'text-align' is inherited, all block-level elements inside [an] element with [text-align:center] will have their inline content centered.

So, the "align=" attribute is being interpreted the same as a style="text-align:" attribute and being inheritted.

So there.

References

Examples

The following coding demonstrates how IE6 may differ from other browsers in how it handles inheritance of styles. Example one demonstarates a typical one-celled, un-nested table, which aligns the table-data element to the left. Example two demonstrates a typical nested table pair, in which IE6 may inherit the center property, but which does not occur in other browsers. Example three demonstrates a way that this works properly. Example four demonstrates alternate ways of centering, neither of which may work as expected with IE6.

Example four is a noteworthy example as it has been the standard manner of centering tables used by many developers: because early versions of Netscape did not recognize the align attribute for the table element, tables were centered by use of the center element.


Example One: Set Up A Basic Table

Example One: Sample Code
<table align="center" summary="example table one: basic table" border="1" width="600">
  <tr>
    <td>spacer</td>
  </tr>
</table>
Example One: Table Example
spacer

O.K.
align is left



Example Two: Include Center Attribute On Outer Table-Data Element

==>> Compare IE6 with earlier IE and with Netscape/Mozilla

Example Two: Sample Code
<table align="center" summary="example table two: outer table" border="1" width="600">
  <tr>
    <td>spacer</td>
  </tr>
  <tr>
    <td align="center"><table align="center" summary="example table two: inner table" border="1" width="80%">
      <tr>
        <td> test test test </td>
      </tr></table></td>
  </tr>
  <tr>
    <td>spacer</td>
  </tr>
</table>
Example Two: Table Example
spacer
test test test
spacer

NOT O.K. in some IE6
the center align is inherited to the nested table



Example Three: Include Center Attribute On Nested Table Element

==>> Compare IE6 with earlier IE and with Netscape/Mozilla

Example Three: Sample Code
<table align="center" summary="example table three: outer table" border="1" width="600">
  <tr>
    <td>spacer</td>
  </tr>
  <tr>
    <td><table align="center" summary="example table three: inner table" border="1" width="80%">
      <tr>
         <td> test test test </td>
      </tr></table></td>
  </tr>
  <tr>
    <td>spacer</td>
  </tr>
</table>
Example Three: Table Example
spacer
test test test
spacer

O.K.
the nested table's cell is left aligned



Example Four: Use Div and (obsolete) Center Elements

==>> Compare IE6 with earlier IE and with Netscape/Mozilla

Example Four: Sample Code
<table align="center" summary="example table four: outer table" border="1" width="600">
  <tr>
    <td>spacer</td>
  </tr>
  <tr>
    <td><center><table summary="example table four: inner table" border="1" width="80%">
      <tr>
        <td> test test test </td>
      </tr></table></center></td>
  </tr>
  <tr>
    <td>spacer</td>
  </tr>
  <tr>
    <td><div align="center"><table summary="example table four: inner table" border="1" width="80%">
      <tr>
        <td> test test test </td>
      </tr></table></div></td>
  </tr>
  <tr>
    <td>spacer</td>
  </tr>
</table>
Example Four: Table Example
spacer
test test test
spacer
test test test
spacer

NEITHER O.K. in some IE6
the center align is inherited to the nested table




Document: http://
Revised:
TOP ]
HOME ]

Made with Cascading Style Sheets  | Valid CSS!  | Valid XHTML 1.0!  | Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0  | Bobby WorldWide Approved AAA


Contact DocSteve


Copyright © 2004
Steve Sconfienza, Ph.D.
All Rights Reserved