Centering Tables: Quirk Mode

Table of contents

Related documents

I: Introduction

This document is a companion to “Centering Tables”, except that a doctype declaration that triggers “Quirk Mode” was used. It attempts to attempts to illustrate various methods for centering tables by using CSS when quirk mode is activated.

The behavior of the following browsers was noted: Microsoft Internet Explorer v. 7.0 (MSIE7), Opera v. 9.0 (Op9), Safari v.3.0, Firefox v. 2.0 (Ff2) on a WinXP PC; Microsoft Internet Explorer v. 5.5 (MSIE5), Microsoft Internet Explorer v. 6.0 (MSIE6), Opera v. 6.01 (Op6), Opera v. 7.1 (Op7), Mozilla v. 1.4 , Netscape Navigator v. 6.1 (NS6.1), or Netscape Navigator 4.0 (NS4) on a Win98 PC; and Microsoft Internet Explorer for the Macintosh v. 5.0 (MacIE5), Netscape Communicator 4.7 (NS4: given the same abbreviation as Netscape 4.0 on Win98 because in these examples they behaved similarly), Safari v. 1.1 (both the Windows version and Macintosh version had the same behavior in these tests), or Opera v. 5 (Op5) on a Macintosh.

N.B.: Some newer browsers, such as Microsoft Internet Explorer v. 6–7, Microsoft Internet Explorer for the Macintosh v. 5.0, the “Gecko” family (Firefox, Mozilla, Netscape Navigator v. 6.1 and up), and Opera, v. 7 and up, change the way in which they render markup depending on which doctype declaration is used. In some cases, documents are rendered according to current W3C standards (“Standard Mode”), at least more or less, whereas in other cases, documents are rendered in a manner that emulates bugs in older browsers (“Quirk Mode”). Whereas a discussion of the details of this “Doctype switching” is beyond the scope of this document, interested readers can refer to articles on this subject written by Matthias Gutfeld or Henri Sivonen.


II: CSS methods

The following examples are to test browser behavior in response to using styles to suggest centering either by using “text-align: center” or with “margin-left:auto; margin-right:auto.” Additionally, examples will be given which allow centering in both compliant and non-compliant browsers while still maintaining markup that is valid.

The examples contain the general structure:


<div>
<table>
</table>
</div>

… in which the styles are applied to the <div>, the <table>, or both.

The relevant portion of the style sheet (“tables.css”) is as follows:


.center1
{ 
margin-left: auto;
margin-right: auto;
}
 
.center2
{ 
text-align: center;
}



Example IIa.

The <table> is styled with margins.

foobar Some dummy text here.

As mentioned, this is the correct way to center tables (the surrounding <div> here is superfluous). This table was centered by MacIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1, but not by MSIE7, MSIE6, MISI5, or by NS4. Note the change in the behavior of MSIE7 and MSIE6 in this example when quirk mode is used.


Example IIb.

The <table> is styled with text-align.

foobar Some dummy text here.

This table was not centered by any of the browsers tested. The table cell contents are centered by MSIE7, MSIE6, MSIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1 Activating quirk mode did not alter the behavior of any browser tested with this example.


Example IIc.

The <div> is styled with margins.

foobar Some dummy text here.

This table was not centered by any of the browsers tested, nor was there was any expectation that it ought to be centered. This method would actually center the containing <div>; however, in this case, its width is 100%. Activating quirk mode did not alter the behavior of any browser tested with this example.


Example IId.

The <div> is styled with text-align.

foobar Some dummy text here.

This example is frequently given incorrectly as the way to center a table. This table was centered by MSIE7, MSIE6, MSIE5, MacIE5, and NS4, but not by Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1. The table cell contents are not centered by any browser tested. Note the changes in the behavior of some browsers in this example when quirk mode is used.


Example IIe.

The <div> is styled with text-align and the <table> is styled with margins.

foobar Some dummy text here.

This table was centered by MSIE7, MSIE6, MSIE5, NS4, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1. MacIE5, oddly enough, appears to align the table at or near the right. The table cell contents are not centered by any browser tested. Note the changes in the behavior of some browsers in this example when quirk mode is used.


Example IIf.

Now we are beginning to see how we might combine methods to allow many different popular browsers to center tables. An example style sheet might look like this:


.center
{ 
text-align: center;
}

.center table
{ 
margin-left: auto;
margin-right: auto;
text-align: left;
}

The first style is applied to the <div> that contains the <table>; this will allow MSIE5 and NS4 to center the table. The next style applies to a <table> that is contained within that <div>; the margin settings will allow centering in CSS-compliant browsers and the text alignment will reset the default alignment for table cells to “left” for browsers in which the text alignment of the <div> is inherited.

An example of a <table> styled this was is as follows:

foobar Some dummy text here.

This table was centered by MSIE7, MSIE6, MSIE5, NS4, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1. MacIE5, oddly enough, appears to align the table at or near the right. The table cell contents are not centered by any browser tested. Note the changes in the behavior of some browsers in this example when quirk mode is used.


Example IIg.

Another elegant cross-browser solution that incorporates these observations was suggested by Rijk van Geijtenbeek:

This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:

div.centered 
{
text-align: center;
}
div.centered table 
{
margin: 0 auto; 
text-align: left;
}


<div class="centered"><table>
…
</table>
</div>

The tabled style as indicated is shown below:

foobar Some dummy text here.

This table was centered by all the browsers tested, and the cell contents also maintained their default left-alignment. Note the changes in the behavior of some browsers in this example when quirk mode is used.


Summary: CSS methods.

According to the CSS specifications, the proper way to suggest centering tables is to set the left and right margins of the table to “auto.” Newer browsers that have good CSS compliance, such as Microsoft Internet Explorer versions 6 and 7 for Windows, Microsoft Internet Explorer 5 for the Macintosh, Opera, Safari, or the “Gecko” family (Firefox, Mozilla, Netscape Navigator v. 6.1 and up), will indeed display tables as centered using this method. This behavior is maintained by MacIE5, Opera 9, Opera 7, Firefox, Mozilla, or NS6.1 (but not MSIE7 or MSIE6), if quirk mode is used instead if standard mode (Note that Opera has a quirk mode for versions 7 and up but not earlier versions).

However, some older browsers, including Microsoft Internet Explorer 5.0 for Windows or Netscape 4, will not center a table this way. In these cases, surrounding the table with a <div> which is styled with “text-align:center” will center the table. When quirk mode is used, MSIE7, MSIE6 or MacIE5 (but not Opera, Firefox, Mozilla or NS6.1) will emulate MSIE5 and also center the table with this method.

Inheritance of “text-align.”

In standard mode, table cell contents will be displayed as centered by MSIE7, MSIE6, Opera 9, Opera 7, Firefox, Mozilla, or NS6.1 if either the outer <div> or the table is styled with “text-align:center.” In quirk mode, MSIE7, MSIE6, Opera 9, Opera 7, Firefox, Mozilla, or NS6.1 will behave as MS Internet Explorer 5.0 for Windows and will center the table contents only if the table is styled with “text-align:center.”

Conclusion:

Authors who wish to center tables in CSS-compliant browsers without regard to behavior of older browsers or the effect of doctype switching may simply use method IIa, in which the left and right margins of the table are set to “auto.” If greater compatibility with older browsers is needed, then one of the “combination” methods such as methods IIf or IIg should be used. If one is accommodating certain peculiarities of MacIE5, then method IIf should be used when standard mode is activated, and method IIg should be used if quirk mode is activated (cf. the companion document which uses a doctype declaration which triggers “Standard Mode.”


III: HTML methods.

These examples are included to demonstrate html methods for centering tables. All of these methods use deprecated tags or attributes and thus cannot be used with a strict doctype declaration.


Example IIIa.

Centered with <div align="center">.

foobar Some dummy text here.

All browsers tested centered the table, but not the table cell contents, in this example. Note the changes in the behavior of MSIE7, MSIE6, Opera 9, and Opera7 in this example when quirk mode is used.


Example IIIb.

Centered with <table align="center">.

foobar Some dummy text here.

All browsers tested centered the table, but not the table cell contents, in this example.


Example IIIc.

Centered with <center>.

foobar Some dummy text here.

All browsers tested centered the table, but not the table cell contents, in this example. Note the changes in the behavior of MSIE7, MSIE6, Opera 9, and Opera7 in this example when quirk mode is used.


Summary: HTML methods.

All of the browsers tested centered the table in the examples above. In standard mode, MSIE7, MSIE6, Opera 9, and Opera7 also centered the table cell contents in examples IIIa and IIIc; however, in quirk mode, they did not center the table cell contents in any of the examples (cf. the companion document which uses a doctype declaration which triggers “Standard Mode”).