About a year ago I posted to my blog about my inability to center content vertically on a page while still complying with the XHTML 1.0 Strict DOCTYPE. Last week, John Wood dropped by to enlighten me with a solution.
John, you're exactly right. Adding CSS height declarations to the html and body elements allows for standard-compliant code and the desired effect. The following code validates as XHTML 1.0 Strict:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height Test</title>
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 100%;
background-color: #CCC;
}
td {
text-align: center;
}
//-->
</style>
</head>
<body>
<table>
<tr>
<td>
Centered Content
</td>
</tr>
</table>
</body>
</html>
Thanks for sharing that with me!
Comments
Richard, your approach doesn't seem to work for me. Maybe I was unclear on what you meant. Just from eyeballing your CSS, though, it looks like you won't achieve the desired result on monitors that are set to resolutions either higher than 720 pixels wide or lower. When you're trying to achieve absolutely centered content in all situations, the source I included above does the trick.
It might be nice to try and do this without tables (which is what it looks like you're trying to do), but then it kind of takes away from the whole point of the discussion, which is tables in XHTML.
This is obvious, but it caught me out. If your table lives within a form then you also need:
form {
height: 100%;
margin: 0;
padding: 0;
}
in your style
Paul, thanks for that last post, which incidently explained 3 hours of poking around google.
Thanks, Paul! I'm glad I continued to read down to your comment!
And I'd be remiss to forget Bernie and John for starting these posts to help me find it.
Thanks EVERYONE!
Well, I may have spoken too soon....
It was working great for me at first, but now I notice this small "flaw" in what I am trying to do. The problem I am having is evident in the following code:
this should be small |
| this should be 100% |
When viewed in IE6, the table is actually larger than the window because it makes the bottom cell/row equal to the height of the window instead of the height of the window minus the height of the top cell/row.
I only seem to experience this in IE6. Firefox 1.5 renders it as it should.
Any suggestions???
Thanks,
Jorin
Sorry about that last post, the HTML didnt come through as intended. here it is again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;" >
<body style="width:100%;height:100%;margin:0;">
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top">
this should be small
</td>
</tr>
<tr>
<td style="width:100%;height:100%;">this should be 100%</td>
</tr>
</table>
</body>
</html>
Thanks for this trick - you just saved my bacon!
I'm having problem with css table height 100% in firefox. I'm working on an ASP.NET project, and it requires controls(and the layout table) to be put inside the form tag, and aparantly firefox 2.0 doesn't like it - table comes out short.
Any ideas?
Dude, I am so glad you posted this. We are in the middle of rebooting our site and updating it to XTML when I came across this problem. There is so much stuff on our site using table heights and I was pulling my hair out! Thanks a billion.
Sincerely
Randy Trulson
I've made a auto-height page with use of tables and div's. And it is XHTML 1.1 valid, without any weird tricks. And it is FF & IE compatible; both using the same css.
Go to the source of this page:
http://www.programmix.nl/project/xhtml11.htm
Argh! I'm going to go insane! LOL!
The method explained in the code above works like a charm... unless the item you're trying to resize is in another DIV.
I have a table on an .aspx page that uses Ajax. And for the LIFE of me... I cannot get this DARN page to size to 100% height. It works like a charm in IE6... but IE7 and FF just plain refuse :(
Is there any other way to get this done, or is this it - the only solution?
FF is the issue in this case. I am encountering the same issue at the moment. If the table is embedded into a form tag FF refuses to size the embedded table to 100%. Doesnt matter how much you set the form height to 100%, too! As soon as you move the table out of the form tag the table will adjust it's height to 100% (when you set html and body to 100%, too).
Opera and IE both dont have this problem. It seems to be a FF related issue only. So (even though I wanted to avoid it) I will need a javascript line here (depending where you want to inject that code line you will need to put it into a function... FF tends to ignore javascript that is executed on load and not wrapped into a function)
if(navigator.userAgent.indexOf("Firefox")!=-1)
{
document.getElementById("TableId").style.height = document.body.clientHeight + "px";
}
or in a function
window.onLoad = function(){
if(navigator.userAgent.indexOf("Firefox")!=-1)
{document.getElementById("TableId").style.height = document.body.clientHeight + "px";}
};
Am i the only one who doesn't seem to get this to work? I have a table inside another table. the outter table does the height but the inner table remains the same and the inner table is the one that i need to do the height.
And secondary is there a way to make 3 positions for divs? 4 example i have 3 buttons i want one in the left one in the center and one in the right. But withoud a table. Only way i found is with float but it only goes left and right so the center one isn`t where it should.
Julian, you could use absolute positioning of your div elements to achieve this.
For others encountering problems setting height to 100%, besides setting the height of all parent elements to 100%, don't forget to set both body _and_ html to 100% height (I couldn't get this working for me in FF until I set html height to 100%, in addition to having all enclosing elements set as mentioned).
me voy!
it's very nice tutorial friend.
I was interested to see Han's example but the link is dead (http://www.programmix.nl/project/xhtml11.htm). Anyone know where I can check this out?
Even though it was written a bit a ago - any CSS tips are still current. Thanks.
This is why I adore your site.
http://hromanager.com/articles/Art/153916/277/You-must-read-this-prior-to-taking-your-driving-theory-test.html
Post Comments
If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.
This way also works and validates as strict.
body {
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
text-align: center;
}
Then place the entire script inside this div.
#container {
margin: 0 auto;
width: 720px;
text-align: left;
}
Permalink