I've been pulling out my hair for the last 30 minutes trying to get an HTML table with height 100% to work in my ASP.NET 2.0 application. I'm trying to render a block of HTML in the center of my application page.
I finally found the solution to my problem - it seems that turning on XHTML compliance with the DOCTYPE declarator breaks the table height attribute - ASP.NET 2.0 is XHTML compliant out of the box, and since the height attribute is no longer supported in this manner, my page broke.
This article helps to clarify....
http://www.apptools.com/examples/tableheight.phpThe article suggests, applying the following style to the page, and declaring a top level table with id "wrapper" containing a single column and row -
align center and
valign middle - to obtain desired center page behavior.
<style type="text/css">
html, body, #wrapper
{
height:90%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
form
{
margin: 0;
padding: 0;
}
#wrapper
{
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
</style>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<form id="mainForm" runat="server">
<asp:PlaceHolder ID="CONTENT" runat="server"></asp:PlaceHolder>
</form>
</td>
</tr>
</table>Sadly, placing the wrapper table inside the form tags breaks the behavior, so I applied centering to the entire page contents, form tags and all. This works for my current situation, but isn't ideal.