Log in

View Full Version : DOCType and Vertical Positioning


dog
06-18-2007, 02:09 PM
Hello,

I want to position my page content inside a box that sits in the centre of the browser window. Example: http://ll.dc5b.com.

In the example the box holding the page content is placed inside a td and given a 'verticle-position: middle;'. See the example below:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>

<title>Example</title>

<style type="text/css">
body { text-align: center; }

table#centreHolder { height: 100&#37;; width: 100%; }

table#centreHolder td { vertical-align: middle; }

div#containerBox {width: 600px; margin: auto; border: 1px solid black; }
</style>
</head>

<body>
<table id="centreHolder"><tr><td>
<div id="containerBox">SITE CONTENT</div>
</td></tr></table>
</body>

However when I use a 4.01 DOCTYPE it changes everything.
Example:


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

<title>Example</title>

<style type="text/css">
body { text-align: center; }

table#centreHolder { height: 100%; width: 100%; }

table#centreHolder td { vertical-align: middle; }

div#container {width: 600px; margin: auto; border: 1px solid black; }
</style>
</head>

<body>
<table id="centreHolder"><tr><td>
<div id="container">SITE CONTENT</div>
</td></tr></table>
</body>

Can anyone offer me an alternative way of acheiving the same effect using a 4.01 doctype?

Thanks,
dog
alexjewell
06-18-2007, 02:52 PM
What changes when using a 4.01 doctype?
dog
06-18-2007, 03:09 PM
What changes when using a 4.01 doctype?
Two things actually. The 'vertical-align: middle;', seems to have no effect and also the 'text-align: center' from the body gets inherited by all the child elements.
alexjewell
06-18-2007, 04:01 PM
ok, the vertical-align: middle is something I'm not entirely sure about.

To fix the child elements inheriting the text-align: center; do the following in your css stylesheet:



body *{
text-align: left;}
jscheuer1
06-18-2007, 04:48 PM
As far as I know, there is no height:100% in HTML 4.01 unless the height of the container (in the case of your demo, the container is the body) is specified.
Twey
06-18-2007, 05:37 PM
Hahahahaha, HTML 3.2 Final? Seriously? I didn't know anybody had actually used that within the past... eight years? :p The latest well-supported DOCTYPE, and the one you should have been using for the past half a decade at least, is HTML 4.01 Strict.

It's very bad style to use tables for layout. Don't do this. Avoid pixel-sizing things too, as this results in fragile, inflexible designs. Try this page (http://phrogz.net/CSS/vertical-align/index.html) for an explanation of your vertical-align problem.
As far as I know, there is no height:100&#37; in HTML 4.01 unless the height of the container (in the case of your demo, the container is the body) is specified.The <body>'s height is considered to be specified at the height of the viewport.
mwinter
06-18-2007, 05:57 PM
The <body>'s height is considered to be specified at the height of the viewport.

100&#37; of the height of the root element is the height of the viewport. For HTML, that's the html element.
jscheuer1
06-18-2007, 09:15 PM
That makes it sound as though you could set the body's height to 100&#37; and it would then be the height of its container, the HTML element and therefore the height of the viewport, but it isn't.

There was an oversight in developing the standard for HTML 4.01 in that you cannot vertically center unless you know the height of the content. Even then, you have to jump through hoops to do it and it has a nasty side effect when the viewport is shorter than the content.

Javascript can come to rescue, and in IE, using the expression technique in style, this can work out quite well, even though it is somewhat involved. In all others, you are left with content that must 'snap into place' onload.

Either way, it flops with javascript disabled.

If you must have content of unknown and/or of changing height vertically centered, I'd suggest sticking with quirks mode all the way:


<html>
<head>

<title>Example</title>

<style type="text/css">
#container {width: 600px;border: 1px solid black; }
</style>
</head>

<body>
<table height="100%" align="center"><tr><td valign="middle">
<div id="container">SITE CONTENT</div>
</td></tr></table>
</body>
Twey
06-18-2007, 09:30 PM
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
jscheuer1
06-18-2007, 10:02 PM
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

This is another example of needing to know the height of the centered content. A bit overly complex of one at that.


To get it to
centre vertically, it has a negative top position that is exactly half
of its height