Web Technical Pages

IE/NS Issues Pages

Centering Block-Level Elements in Strict DTDs

The Problem

This issue appears to be related to the elsewhere discussed issue of IE 6 Cascade, CSS Inheritance. The point being that strict DTDs ("html 4.0 strict," "xhtml 1.0 strict," and "xhtml 1.1") do not support an "align=center" atribute. Alternative methods are required to center a block-level element (such as a table or a horizontal rule): the point is that when using strict DTDs, <table align="center"> . . . </table> or <hr align="center" /> fail to validate. The coding problem is that IE 6 and NS/Mozilla see centering differently, and IE 6 probably is not doing it correctly.

Why It Is A Problem

The W3C conceptualizes the presentation of a page based on a "box model." The box model includes the outer physical border, the space between that physical border and an inner border (the "margin"), that inner border (the "border"), and the space between that inner border and the content area (the "padding"). When unspecified, those areas, starting from the innermost, collapse into the next outer area (see W3C CSS2 Chapter 8: Box Model; for more on these areas, see DocSteve, Web Programming Samples and References, Cascading Style Sheets: The CSS Box). Based on this conceptualization of the CSS Box Model, the way to control the position of block-level elements is to move them around within the box, primarilly by using the outermost element of the box model, the margin.

The problem is not that IE does not do this: it does (see example five, following). The problem is that movement within margins is not happening consistently, specifically when the setting "auto" is used. IE does not set the left and right margins equal with this usage, while NS/Mozilla does (thus in NS/Mozilla the element is centered); worse, NS/Mozilla do not respond to the IE method of centering.

Overall, while this is annoying, the work-around is simple: things have to be done twice, once for IE, and once for more broadly compliant browsers.

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

W3C documentation indicates that for block-level elements in normal flow, left and right margins may be set to equal values with the "auto" specification, thus centering the block-level element within equally-spaced margins. IE does not do that; rather, it is setting the margins to zero. While this is correct for inline elements, it is not for block level elements. The pertinent rules for inline and block-level elements are as follows:

For inline elements, the following rules apply:

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.

and

10.3.2 Inline, replaced elements

A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'. A specified value of 'auto' for 'width' gives the element's intrinsic width as the computed value.

For block-level elements, the following rules apply:

10.3.3 Block-level, non-replaced elements in normal flow

If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.

and

10.3.4 Block-level, replaced elements in normal flow

[I]f both margins are 'auto', their computed values are equal.

W3C documentation indicates that a directive to align (left/right/center/etc.) should be inheritied down to the contents of contained block-level elements. However, the specification is that the content of the block-level element, not specifically the element itself, sbould be so aligned:

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.

However, IE inherits the inline directive down to the positioning of the contained element, not just the contents of the contained element. This is an arguable implementation of the cascade and is inconsistent with the concept of the CSS Box. It is like the hint mentioned in the cascade issue: the "hint" that we are giving it is to style, for example, the <div> element as centered, which is then inheritted down to position of a nested table. So, while "auto" is being computed incorrectly, the style="text-align:" attribute and being inheritted at the block-level.

That's the work-around, so there.

References

• W3C Cascading Style Sheets, level 2: CSS2 Specification
  • Chapter Six, "Assigning property values, Cascading, and Inheritance," § 6.4.4, "Precedence of non-CSS presentational hints"
  • Chapter Eight, "Box Model," Chap. 8, passem
  • Chapter Ten, "Visual formatting model details," § 10.3, "Computing widths and margins"
  • Chapter Sixteen, "Text," § 16.2, "Alignment: the 'text-align' property"
• See also IE 6 Cascade, CSS Inheritance

Examples

The following coding demonstrates how IE6 may differ from other browsers in how it handles centering 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, 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 five demonstrates that IE otherwise impelements margins correctly.

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.

<table summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>

<div style="text-align:center"> 
<table summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
</div>

<div style="margin:0">
<table summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
</div>

<div style="margin:0;text-align:center"> 
<table summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
</div>

<table style="margin:0 auto" summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
<table style="text-align:center" summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>

<div style=text-align:center"><-- this line for IE == style in table element is correct CSS -->
<table style="margin:0 auto" summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
</div>

<table style="margin-left:7em" summary="demonstrate block-level center techniques">
  <tr>
    <td style="background-color:#f0f0f0">
blah blah blan 
    </td>
  </tr>
</table>
</div>

Contact DocSteve

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