This is my markup:
<!DOCTYPE HTML>
<html>
<head>
<title>Test title</title>
<style type="text/css">
*
{
margin:0px auto;
padding:0px;
}
html,body
{
height:100%;
width:100%;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tr>
<td style="height:55px;background:#CCC;" valign="top">
<h1>Header</h1>
</td>
</tr>
<tr>
<td valign="top">
Content @RenderBody()
</td>
</tr>
<tr>
<td style="height:85px;background:#CCC;" valign="bottom">
Footer
</td>
</tr>
</table>
</body>
</html>
Can anybody tell me why td height is not taking effect? This same markup works in IE9. Is it due to the HTML5 doctype?
First, you should definitely rethink your approach to page layout. Tables should only be used for presenting tabular data rather than setting page layouts. You should look into Cascading Style Sheets (CSS) and layout elements such as DIV’s if possible.
Addressing the question however, the height styles seem to apply in Chrome, and are valid as per the information here: http://www.w3schools.com/css/css_table.asp.
As suggested above, try running your code through the W3C validator at http://validator.w3.org/.
I would still recommend abandoning the use of tables if possible, and use an external CSS instead of inline styles to style up your elements as this is a much more modern, flexible and semantically correct approach. You may be following some outdated tutorials.
I hope this helps.