Page is a not externally linkable
pcunite - 1:53 am on Jan 22, 2011 (gmt 0)
What do you think of this sticky footer design? It works on every single brower period. So easy to use... What is wrong with it? One table, is that really evil? Using div and css I could never make it work the same on everything, and using negative values here and there is a hack imho.
<!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" dir="ltr" lang="en-US">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body, #wrap {height: 100%;margin: 0 auto;padding: 0; }
html {overflow-y:scroll;}
#wrap{ border: 1px solid #31659C; width:885px; }
#footercell {height: 1px; }
#push {height: 1px; }
.footer {border-top:#ffff80 10px solid; background-color:#003366; padding:3px 0px 3px;}
</style>
</head>
<body>
<!-- wrap Table -->
<table id="wrap" cellspacing="0" cellpadding="0">
<!-- Top Cell -->
<tr><td id="topcell" valign="top">
<!-- Content and various links -->
<div style="height:300px; padding:50px; 0 50px;">
This sticky footer design works on <em>every</em> browser ... <strong>period</strong>. </br/></br/>
The design at cssstickyfooter.com does not.
</div>
<!-- end Content and various links -->
</td></tr>
<!-- END Top Cell -->
<!-- footer cell -->
<tr><td id="footercell" valign="bottom">
<div id="push"></div>
<div class="footer">
<a href="http://www.webmasterworld.com">CoolSite</a>
</div>
</td></tr>
<!-- END footer cell -->
</table>
<!-- end wrap Table -->
</body>
</html>