homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved