HTML Forum

**Nathand** · 12:15 PM

What's up with this? I have this code:

Code:

<html>
<head>
<title>Test</title>
</head>
<body bgcolor=#000000>

<table bgcolor=#000000 height="100%" width="100%" align="middle">
<tr>
<td>
<div align="center"><font color="white" size="30">hello</font></div>
</td>
</tr>
</table>

</body>
</html>

That's the most efficient way I found to center something, but if I add:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Then the text is no longer centered?! It snaps to the top of the page? Why would adding a Doctype screw up my page?

-Nathan

**CSS4Life** · 09-09-2007, 01:38 PM

Quote:

Originally Posted by Nathand

Why would adding a Doctype screw up my page?

Before you told the browser what Doctype you were using, it assumed you didn't really know what you were doing, so it rendered the page in Quirks mode, where it attempted to interpret the code you wrote.

Once the Doctype was added, the browser decided you probably knew what you were doing and therefore rendered the page to web standards, in Standards mode.

Your best bet is to stop using tables to centralize your content and use divs and CSS to achieve this. This web site should help:

http://dorward.me.uk/www/centre/

Tables weren't designed to be used for styling, and as web standards continue to move on, it's best now to switch to CSS where possible to display styles.

**frost** · 09-09-2007, 02:59 PM

Unfortunately, CSS2 doesn't have a property to vertically center stuff. You might think vertical-align might do it, but it only works for table cells and and inline elements. What you might think you could do instead, is to make the parent element act like a table cell (display: table-cell;) and vertically center it (vertical-align: center;). But it's not really that simple. If you want it to work in IE6 and IE7 without using tables, then you have to use CSS hacks. As far as I know, it's impossible to vertically align most elements without using invalid CSS or tables.

Using the HTML height attribute on a table is not allowed when following the doctype, and that's why your example doesn't work when you add the doctype. There is a workaround though, and the basis of it involves using the CSS height property on your table instead of the HTML attribute.

To center your page with valid CSS and tables: http://apptools.com/examples/tableheight.php

To center your page with CSS hacks and no tables:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

**dansgalaxy** · 09-09-2007, 04:16 PM

Quote:

Originally Posted by whym

Before you told the browser what Doctype you were using, it assumed you didn't really know what you were doing, so it rendered the page in Quirks mode, where it attempted to interpret the code you wrote.

Once the Doctype was added, the browser decided you probably knew what you were doing and therefore rendered the page to web standards, in Standards mode.

Your best bet is to stop using tables to centralize your content and use divs and CSS to achieve this. This web site should help:

http://dorward.me.uk/www/centre/

Tables weren't designed to be used for styling, and as web standards continue to move on, it's best now to switch to CSS where possible to display styles.

Is it just me or does LadyNRed and the like rub off on everyone on here