| The perfect sticky footer
|
pcunite
msg:4256508 | 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>
|
|
|
pcunite
msg:4256702 | 7:13 pm on Jan 22, 2011 (gmt 0) |
Updated HTML5 version...
<!DOCTYPE html>
<html>
<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; border-spacing:0; *border-collapse: expression('separate', cellSpacing = '0px'); /* IE hack */}
#topcell {padding:0; vertical-align:top;}
#footercell {height: 1px; padding:0; vertical-align:bottom;}
#push {height: 1px; }
.footer {border-top:#ffff80 10px solid; background-color:#003366; padding:3px 0px 3px;}
</style>
</head>
<body>
<!-- wrap Table -->
<table id="wrap" >
<!-- Top Cell -->
<tr><td id="topcell">
<!-- 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">
<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>
|
|
|
jalarie
msg:4258093 | 10:25 pm on Jan 25, 2011 (gmt 0) |
Each of your versions contains at least one error. The line
<div style="height:300px; padding:50px; 0 50px;">
has too many semi-colons (;) in the padding specification.
|
|
|
