Forum Moderators: not2easy
Have a problem that needs solving. I have recently made the choise to follow the recomendation from W3C.org that XHTML is the standard to use. It has all worked fine for me except this one thing. On a site I want a table to cover the ENTIRE page. This becouse I want to devide the table in diffrent areas. First there shall be a header area. This needs a height set in pixels. Then a body-area follows and this should be a dynamic part, incrising or decresing pending on the sixe of the users browser-window.
Last there is a footer that always shall start where the body ends. The only rule the footer must follow is that it must never start higer then its own height above the bottom border of the browser window. So unleas the content of the body pressed the footer down (and scrolling becomes neassesary) is should lay at the bottom of the page.
Now.. in HTML this was no real problem, with XHTML I belive it is =(
I have made a small example that according to me should work.. but dosenīt. ANY suggestion is very welcome!
---------- CODE ----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>A table problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
BODY{
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:11px;
line-height:16px;
color: #333333;
font-weight:normal;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.SuperTable{
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
border-width:0px;
border-spacing:0px;
}
</style>
</head>
<body>
<table class="SuperTable">
<tr><td bgcolor="#CCCCCC" height="20">Header Area</td>
</tr>
<tr><td bgcolor="#FFFFFF">Body Area</td>
</tr>
<tr><td bgcolor="#CCCCCC" height="20">Footer Area</td>
</tr>
</table>
</body>
</html>
---------- END CODE -----------
Thanx in advance!
Kalle
Sweden
The html element must also be given a height.
This is my current exampel:
---------- CODE --------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>A table problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
HTML,
BODY{
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:11px;
line-height:16px;
color: #333333;
font-weight:normal;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.SuperTable{
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
border-width:0px;
border-spacing:0px;
}
</style>
</head>
<body>
<table class="SuperTable">
<tr><td bgcolor="#CCCCCC" height="20">Header Area</td>
</tr>
<tr><td bgcolor="#FFFFFF">Body Area</td>
</tr>
<tr><td bgcolor="#CCCCCC" height="20">Footer Area</td>
</tr>
</table>
</body>
</html>
----------- END CODE -------------
Thanx again!
Var i Sverige? ;)
Ok.. so if it is hard this way.. are there any other way to do it?
it is importent that it works in "just about" all browsers. Thats one of the reasons I changend to XHTML in the first place.
Then you might want to stick with just HTML, and use the height attribute for the table tag.
Ok thanx DrDoc!
