XHTML strict mode and table height
I wanted to vertically align something central to the screen. To avoid all the unwanted positioning and looping using DIV tags I decided to try it with a table. My Doctype was XHTML strict mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>your page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <table width="100%" border="0" style="height: 100%;"> <tr> <td>HELLO</td> </tr> </table> </body> </html>
It turned out that, in XHTML strict mode, you can’t really have 100% table height like the transitional.
Take a look at the allowed attributes for table and valid attributes for td on the XHTML website[http://www.xhtml.com] . Height is not a valid attribute. I would like to know the reason behind removal of height from the table attribute compared to the ‘bad practices’ from HTML 4 standard mode.
Standards are good, provided it meet their purpose. People like me who take extra pain to validate their html every day, we respect standards. But in this case it definitely a broken standard for me.
And oh, the DIV lovers will come and tell me I can do a vertical align to the center of screen ‘easily’ using DIV tag. Yeah right! Again is there a standard way of doing vertical align using a single div tag? I would love to see that 
Anyway this is how I made it work finally. So here is the code to align a div block center to the screen both horizontal and vertical. And yeah, this one works on FF and even on IE6;) [see my IE 6.0 support pledge]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>your page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{
margin: 0 auto;
}
#verticalWrapper {
display: block;
height: 1px;
left: 0px;
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
#verticalContainer {
height: 140px;
left: 50%;
margin-left: -76px;
position: absolute;
top: -10px;
width: 150px;
}
</style>
</head>
<body>
<div id="verticalWrapper">
<div id="verticalContainer">
CENTER
</div>
</div>
</body>
</html>
