Centering blocks with CSS in Quirk Mode

Table of contents

Related documents

Introduction

This document is a companion to “Centering with CSS,” except that a doctype declaration that triggers “Quirk Mode” was used. It attempts to attempts to illustrate various methods for centering blocks 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.

Standards-compatible methods for centering blocks.

The first two examples demonstrate centering methods that ought to work in CSS-compliant browsers.

Example 1: Flexible paragraph with defined-width margins.

This example centers a paragraph using the following style:


.center1
{
margin-left: 20%;
margin-right: 20%;
}

… which suggests that the paragraph have left and right margins that are defined as 20% of the width of the container. The paragraph renders as follows:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph is centered by all the browsers used in this test. No changes in the rendering of this paragraph were caused by using “Quirk mode.”

Example 2: Defined-width paragraph with flexible margins.

This example centers a paragraph using the following style:


.center2
{
margin-left: auto;
margin-right: auto;
width: 60%;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph was centered by MacIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1, but not by MSIE7, MSIE6, MSIE5 or by NS4. Note the change in the behavior the rendering of this paragraph by MSIE6 and MSIE7 when using “Quirk mode.”

A “hack” to trick MSIE5 into centering fixed-width blocks.

Microsoft Internet Explorer v.5 for Windows is known to misinterpret the CSS declaration {text-align: center} applied to block elements by centering the entire block element. The next two example will demonstrate how to use this behavior to center fixed-width block elements in MSIE5.

Example 3

The following paragraph is surrounded by a <div> which is styled as follows:


.center3
{
text-align: center;
}

… whereas the paragraph is styled as follows:


.center2
{
margin-left: auto;
margin-right: auto;
width: 60%;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

The text in this example was centered, not unexpectedly, within the paragraph, due to the declaration of {text-align: center} applied to the surrounding <div>. However, in all browsers tested—except for NS4—the paragraph itself was also centered. No changes in the rendering of this paragraph were caused by using “Quirk mode.”

Now to correct the text-centering within the paragraph, it is necessary to apply a declaration of {text-align: left} to the paragraph, as illustrated in the next example.

Example 4:

In this example, the outer <div> is styled as in example 3, and the paragraph is styled as follows:


.center2a
{
margin-left: auto;
margin-right: auto;
width: 60%;
text-align: left;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

The text in this paragraph is aligned to the left in all browsers tested, and the paragraph itself is centered by all browsers tested except by NS4. No changes in the rendering of this paragraph were caused by using “Quirk mode.”

A nonstandard solution that works with some browsers.

The following example uses a misinterpretation of the {text-align: center} declaration applied to the <div> surrounding the paragraph. This example is not to be recommended, and in fact ought not to center the paragraph in compliant browsers, but is shown to demonstrate some browser bugs.

Example 5

The following paragraph is surrounded by a <div> which is styled as follows:


.center3
{
text-align: center;
}

… whereas the paragraph is styled as follows:


.left1
{
width: 60%;
text-align: left;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph was centered by MSIE7, MSIE6, MSIE5 and MacIE5. All other browsers tested correctly aligned the paragraph to the left. Note the change in the behavior the rendering of this paragraph by MacIE5 when using “Quirk mode.”

Conclusions

Authors who wish to center block-level elements are encouraged to use the method described in Example 1. This is the only method that will center the paragraph in all the browsers tested here, both in “ Standard mode” and in “Quirk mode.” Additionally, the use of a flexible-width paragraph allows the document to adapt to the width of the browser window and to the user's default text size. If the goal is to center the entire page with equal-width margins, then a similar declaration can be applied to the <body> itself (as I have done here).

If it is necessary, for some reason, to center block elements of fixed size, then the either the method described in Example 2 can be used, if compatibility with MSIE5 or MSIE6 is not required, or the method in Example 4 can be used if centering in MSIE5 or MSIE6 is desired.

Changes in rendering using “Quirk mode.”

Some newer browsers, including Microsoft Internet Explorer v. 6–, Microsoft Internet Explorer v. 5 for the Macintosh, and the “Gecko” (Firefox/Mozilla/Netscape 6/Netscape7) family of browsers, use certain doctype declarations as flags that will trigger a so-called “Quirk mode,” which is meant to emulate some of the bugs that older browsers have in rendering CSS. These changes can be observed in the behavior of MSIE7 and MSIE6 in rendering the paragraph in Example 2 and in the behavior of MacIE5 in rendering the paragraph in Example 5. Firefox, Mozilla, Netscape 6, and Opera 7 and 9 rendered all the example the same in either mode.