Welcome to WebmasterWorld Guest from 54.167.177.207

Forum Moderators: incrediBILL

The perfect sticky footer

   
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>

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>

10:25 pm on Jan 25, 2011 (gmt 0)

10+ Year Member



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month