PDA

Click to See Complete Forum and Search --> : Doc Typs Messing up my table layout

csource
08-04-2009, 02:59 PM
OK this is really gettin under my skin.

I have a table layout which is displayed below. The table layout allows me to place the footer at the bottom of the page. In the Header, I have a menu drop down that requires one of the following doc types:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The problem is when I use any of these DocTypes, it forces the footer to the top of the page instead of keeping it at the bottom. Could anyone provide some advice? I really don't want to do divs. There are a whole new set of issues there. Thanks.

Here is the HTML Code page layout:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Page Title</title>
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">
<form id="Form1" method="post" runat="server">
<table id="Table4" height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td height="1">
Header
</td>
</tr>
<tr>
<td valign="top">
<table id="tContent" runat="server" cellspacing="0" cellpadding="0" width="800" border="0">
<tr>
<td width="30">
</td>
<td>
Content
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1">
Footer
</td>
</tr>
</table>
</form>
</body>
</html>
kiwibrit
08-04-2009, 05:13 PM
The following renders as


Header
Content
Footer


in IE8 and FF 3.5 (I used [code] so that you can see the layout.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head id="Head1" runat="server">
<title>Page Title</title>
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">
<form id="Form1" method="post" runat="server">
<table id="Table4" height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td height="1">
Header
</td>
</tr>
<tr>
<td valign="top">
<table id="tContent" runat="server" cellspacing="0" cellpadding="0" width="800" border="0">
<tr>
<td width="30">
</td>
<td>
Content
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1">
Footer
</td>
</tr>
</table>
</form>
</body>
</html>


My Tidy HTML validator sniffs at proprietary attributes, of course - but the rendering is as I would expect for this file with a .htm file extension.
csource
08-05-2009, 09:54 AM
kiwibrit,

Thanks for the help. The issues is that we need the footer to be at the bottom of the page or below content which ever is longest. Thanks.
kiwibrit
08-05-2009, 11:06 AM
Ah. I'd probably use CSS to keep the footer at the bottom of the page (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) - and for the rest of the layout, for that matter. I almost exclusively use tables for data only, and prefer the footer to float up and down with the natural page length. So I'll leave this one now.