Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix a Sticky Footer that works, but after a browser window is resized, the footer overlaps

Good day,

I've been trying to build a perfect footer who sticks at the bottom of the browser window after it's content. And I got help here @ Stack Overflow previously.

But after a while, and doing a few tests, found out that after the browser window is resized, and then I scroll down , the footer overlaps...it is causing me a big headache right now and I'd like to fix this so I can move on.

I'm going to post the display.css right here:

@charset "utf-8";
body, html {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    min-height:100%; /* needed for footer positioning*/
    height:100%; /* needed for footer positioning*/
}
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    min-height: 100%;/* needed for footer positioning*/
    height: auto !important;/* needed for footer positioning*/
    height: 100%;/* needed for footer positioning*/
    margin: 0 auto -30px;/* needed for footer positioning*/
    width: 1160px;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
#login {
    font-family: Arial;
    font-size: 15px;
    color:#FFF;
    text-align: right;
    width: 440px;
    margin: 2px;
}
#login .theInput {
    font-family: Arial;
    font-size: 14px;
    width: 110px;
    margin-right: 5px;
}
#login .theSubmit {
    font-family: Arial;
    font-size: 10px;
    background-color: #333333;
    color: #FFFFFF;
    margin-right: 5px;
}
h1#lineainvisible {
    width:1160px;
    height:4px;
    position:relative;
    margin-top:4px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul#nav {
    width:100%;
    height:36px;
    display:block;
    background-color:#000;
    background-repeat:repeat-x;
}
#wrapthatbanner {
    display:block;
    float:left;
    width:100%;
    height:524px;
    margin-bottom:20px;
}
#content {
    margin: 0px 20px 30px 20px; /* needed for footer positioning*/
}
.panelsreadmore {
    margin-right: 10px;
    text-align:right;
}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square;
    margin-left: 75px;
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0;
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}
#contentLeft {
    float: left;
    width:580px;
}
#contentRight {
    float: right;
    width:580px;
}
.sitenote {
    display:block;
    padding:6px;
    border:1px solid #bae2f0;
    background:#e3f4f9;
    line-height:130%;
    font-size:13px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    margin-left: 0;
}
#footer, .push /* needed for footer positioning*/ {
    padding: 5px;
    clear: both;
    position:absolute;/* needed for footer positioning*/
    bottom:0;/* needed for footer positioning*/
    height: -30px;/* needed for footer positioning*/
    width:1150px;
}

And this is the HTML Template File.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Title of Page</title>
<!-- TemplateEndEditable -->
<!-- TemplateParam name="categoria" type="text" value="home" -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Meta Tags - Close -->

<!-- CSS Loader - StartsS -->
<link href="../css/main-client.css" rel="stylesheet" type="text/css" media="all" />

<!-- CSS Loader - Ends -->

<!-- Drop Down Menu -->
<link href="../css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="../css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Drop Down Menu - Ends -->

<!-- Font Replacement Starts -->
<script src="../cufon-yui.js" type="text/javascript"></script>
<script src="../AFB_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
            Cufon.replace('h2');
        </script>
<script type="text/javascript"> 
            Cufon.replace('h3');
        </script> 
        <script type="text/javascript"> 
            Cufon.replace('h4');
        </script> 
<!-- Font Replacement = END -->

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->

<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body id="@@(categoria)@@">
<div id="container">
  <div id="header">
    <table width="100%" border="0">
      <tr>
        <td width="67%" height="77px;"><a href="index.html"><img src="../images/Titulos/5.png" alt="" width="257"  hspace="10" vspace="10"  border="0" id="screen_logo" title=""/></a></td>
        <td width="33%" valign="top"><form id="login">Log in: <input type="text" class="theInput" name="user" />
<input type="submit" name="Submit" value="Submit" />
</form>
</td>
      </tr>
    </table>
  </div>
 <!-- Aqui es donde empieza fisicamente el menu drop down -->
  <ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="../index.html">Home</a></li>
    <li><a href="#" class="dir">Service 1</a></li>
    <li><a href="#" class="dir">Service 2</a></li>
    <li><a href="#" class="dir">Service 3</a></li>
    <li><a href="#" class="dir">Service 4</a></li>
    <li><a href="#" class="dir">Service 5</a></li>
    <li><a href="#" class="dir">Service 6</a></li>
 </ul>
  <!-- Aqui termina el menu CSS-->


  <!-- Reset -->
  <div id="wmfg"> </div> 
  <!-- Reset -->

<!-- TemplateBeginEditable name="banner-grande" --> <!-- TemplateEndEditable -->


  <div id="content"><!-- TemplateBeginEditable name="content" -->
    <p>&nbsp;</p>
  <!-- TemplateEndEditable --></div>
  <div id="footer"><a href="../terms.html">Terms and Conditions</a> |<a href="privacy.html"> Privacy Policy</a><br/>
  Copyright 2010. .</div>
</div>
</div>
</body>
</html>

Can somebody take a look at this, and tell me what am I doing wrong ? Thanks in advance.

like image 285
UXdesigner Avatar asked Nov 14 '22 11:11

UXdesigner


1 Answers

I couldn't tell if you tried rolling your own, but this one works really well.

http://www.cssstickyfooter.com/

like image 64
adamwstl Avatar answered Dec 05 '22 20:12

adamwstl