Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Vertical Centering CSS


SuzyUK - 9:21 pm on Jun 30, 2011 (gmt 0)


OK for a start I can't see the bottom whitespace "gap" that you're mentioning, I would not recommend absolute positioning, and I see no validation errors.

So this prompts the question, which browsers are you seeing your gap, and which browsers show what you expect.. I do see different things in IE7/8, and Firefox for example.

so the issue here is I think how to get the desired 100% height inherited down through the elements. for example in IE the first (parent) table (class=tablas) does inherit the 100% height from the
html & body elements, but the nested tables don't. whereas in Firefox they do

Is that what you mean about the bottom gap?

code as read form your OP


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%; background: #fff;}

body {
margin: 70px 0px 0px 0px;
padding: 0px;
background: #eee;
}

.tablas {
height: 100%;
border: 3px double #000;
}

</style>
</head>
<body>


<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas>
<tr>
<td>
<table width=90% border=0 align=center cellpadding=0 cellspacing=5 class=tablas>
<tr>
<td valign=top><h1><b>Bla </b></h1></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>


Thread source:: http://www.webmasterworld.com/css/4332833.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com