Main Page Content
Does IE 6 Center Your Table Content?
Rated 4.23 (Ratings: 14) (Add your rating)
Log in to add a comment
(8 comments so far)
James Aylard
User since: November 18, 1999
Last login: November 18, 1999
Articles written: 7
With the release of Internet Explorer 6, some developers are discovering that content in table cells that used to be left-justified is now centered. The cause is a little obscure, but the solution is simple.
Basically, the problem occurs when both of two conditions are present:
- A table is nested within either another table or a block element (such as a <div>) where the outer table or block element has its
alignattribute set to"center", typically to create a "jello" layout where the content remains at the center of the screen. - Internet Explorer 6 is operating in "standards-compliant" mode
To illustrate, here is a simple snippet of HTML code that will produce cell-content centering in Internet Explorer 6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IE 6 Centering Behavior</title>
</head>
<body>
<div align="center">
<table border="1">
<tr>
<td>Here is some data to make this cell a bit wide.</td>
</tr>
<tr>
<td>Is this cell centered?</td>
</tr>
</table>
</div>
</body>
</html>
In previous versions of Internet Explorer, this code could reliably be expected to display as in Figure 1, below:
Figure 1
By contrast, Internet Explorer 6 centers not only the nested table itself, but also the content of its cells as in Figure 2, below:
Figure 2
The actual cause of this rendering quirk in Internet Explorer 6 is its new, standards-compliant rendering mode. Although it is unclear to me that the W3C HTML 4.01 Specification requires this behavior, the IE development team apparently interpreted the spec otherwise (or else it is a rendering bug that will be banished in a future release). So, the key to eliminating this problem is simple: turn off the standards-compliant rendering mode.
How, you ask? The secret is in the document type declaration (sometimes referred to as a doctype declaration, but not to be confused with the document type definition, or DTD). And here's how you do it:
- The following doctype declaration causes IE 6 to render the page in standards-compliant mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br>
"http://www.w3.org/TR/html4/loose.dtd"> - But with a simple modification -- eliminating the URI portion of the doctype declaration -- IE 6 reverts to what is commonly called "quirks" mode, and renders the table in a manner consistent with previous versions of IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
In case you are wondering, the doctype declaration without a URI will validate using the W3C's validator. So, there you have it: compliant code that will help you stay centered, instead of your table cells. Happy coding!
