XHTML/CSS Standard Vertical Centering sought

[Kenneth]

Okay, I've been scouring Google for hours looking for a solution to this
problem, but as of yet I can't find one.

XHTML Transitional seems to specify that I can no longer set a table's
height to 100% and vertically center content inside of it. Therefore,
I'm seeking a way, preferably in CSS to vertically center a site.

Here's more of a visual to what I have:

/********************************
/ (header area)
/********************************
/* * * *
/* * content * *
/* * (420px,flexible * *
/* * dep. on content) * *
/* * * *
/********************************
/ (footer area)
/********************************

The content area is what needs to be centered. Ideally, the content is
420px tall, but that may vary according to the amount of content, so
using a margin-top: -210px, option wouldn't work, nor would percentages,
so far as I can tell.

If there was a way to do it in pre-XHTML with tables, I can't believe
that it's impossible to do in XHTML.

Thanks in advance for any feedback!
Kenneth

[Jukka K. Korpela]

Kenneth <ke*****@NOPSAMpardue.com> wrote:

XHTML Transitional seems to specify that I can no longer set a
table's height to 100% and vertically center content inside of it.
"No longer"? A height attribute was never part of any HTML specification.
And IE stopped recognizing it in version 6, unless it decides, by doctype
sniffing absurdity, that the author "wants" IE to work in quirks mode.
This happens no matter whether the document purports to use classic HTML
or XHTML.

And you can set a table's height in CSS:

<style type="text/css">
html, body, table { height: 100%; margin: 0; padding: 0; }
td { vertical-align: middle; }
</style>

<table border><tr><td>
<p>Hello world</p>
</td></tr></table>
Here's more of a visual to what I have:
Regarding vertical layout, this is probably what you want:

<style type="text/css">
html, body, table { height: 100%; margin: 0; padding: 0; }
td { vertical-align: middle; }
td.header { vertical-align: top; }
td.footer { vertical-align: bottom; }
</style>
</head>
<table>
<tr><td class="header">header area</td></tr>
<tr><td>
<p>Hello world</p>
</td></tr>
<tr><td class="footer">footer area</td></tr>
</table>

Of course, it's not much better than doing table layout in (X)HTML.

The tricky part is that vertical-align is defined as vertical alignment
of content for table cells only. And although "table cell" is here a CSS
concept in principle, so that you could turn e.g. a <div> element into a
table cell by declaring display: table-cell, this won't work on the WWW -
IE does not support table-cell.

For other elements, vertical-align is vertical alignment of text lines
and wouldn't help here.
If there was a way to do it in pre-XHTML with tables, I can't believe
that it's impossible to do in XHTML.

What made you think you need to use XHTML at all?

But there are lots of different ways of centering vertically in CSS,
whether you use classic HTML or XHTML, each with various drawbacks.
See the links at the end of
http://css-discuss.incutio.com/?page...ngBlockElement

--
Yucca, http://www.cs.tut.fi/~jkorpela/