Sticky Footer problem. It sticks, but....

**CSSchick** · Oct 6, 2007 15:27

it also rolls underneath the page, causing a scrollbar.

I have played with so many sticky-footer solutions, and believe it or not , this is the best result. LOL. Yes, I'm new at CSS =)

aldo, For some reason, a 1px border is not showing up on the right of the main content area (should reach the top of the footer)

HTML Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Leasing Experts</title>
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="thickbox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/thickbox.js"></script>
<script type="text/javascript" src="scripts/all.js"></script>
<script type="text/javascript" src="scripts/calculator.js"></script>
<script type="text/javascript" src="scripts/gen_validatorv2.js"></script>


<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/apply_nowOver.jpg')">
<div id="wrapper">
   <div id="header"> </div> 
   
  <h1><a title="The Leasing Experts" href="home.html"></a></h1>
  
  <div id="menu">
    <ul>
      <li>&nbsp;</li>
      <li><a href="home.html" title="home" onfocus="blur()">home</a></li>
      <li><a href="why_lease.html" title="why lease" onfocus="blur()">why lease</a></li>
      <li><a href="apply.html" title="apply now" onfocus="blur()">apply now</a></li>
      <li><a href="faq.html" title="f.a.q." onfocus="blur()">f.a.q.</a></li>
      <li><a href="working_capital.html" title="working capital loans" onfocus="blur()">working capital loans</a></li>
      <li class="menucurrent"><a href="hotels.html" title="hotels" onfocus="blur()">hotels</a></li>
      <li><a href="testimonials.html" title="testimonials" onfocus="blur()">testimonials</a></li>
      <li><a href="for_vendors.html" title="for vendors" onfocus="blur()">for vendors</a></li>
      <li><a href="contact_us.html" title="contact us" onfocus="blur()">contact us</a></li>
      <li>&nbsp;</li>
      <li><a href="leasing_calculator.html" title="leasing calculator" onfocus="blur()">leasing calculator</a></li>
    </ul>
    <div id="NAELB"><a href="HTTP://www.naelb.org/"  onfocus="blur()" target="_blank" id="NAELBlogo"  title="National Association of Equipment Leasing Brokers" ></a> </div>
  </div>
  <div id="mainTextArea">
    <p><span class="headerText">The Leasing Experts, Inc... Your Hotel &amp; Motel Specialists</span></p>
    <p>&nbsp;</p>
    <p>TLE has developed a unique niche in the Hospitality Industry by using its network
      of National, name brand manufacturers and suppliers. TLE is a member of
      AAHOA and Florida Hotel-Motel Association. TLE leases &amp; finances ALL FF&amp;E.
      We lease/finance soft goods such as carpeting, bed spreads, pillows, drapery,
      signs and certain bathroom fixtures as normal credits for the full term of up to 60
      months.</p>
    <p>&nbsp;</p>
    <p>
      We work closely with many manufacturers and suppliers that are among the top
      in their field. Our approval ratio in the Hospitality Industry is well over 80%. We
      offer up to $200,000 with a simple one page application for established entities.
      We offer FFE leasing/financing of up to $2MM with a full financial package
      INCLUDING Start-ups and newer properties. We offer leasing/financing for
      expansions and treat them the same as established entities with the help of cross
      guarantors. We also offer short-term leasing as well as a 90 day - same as cash
      program through certain selected suppliers.</p>
    <p>&nbsp;</p>
    <p>
      Many years of hard work and straight forwardness, coupled with our understanding
      of this very Unique industry, has earned us the respect and trust of many fine
      hotels &amp; motels and has played a major role in our success.</p>
    </div>
  <div id="right">
    <p><span class="rightBold">The Leasing Experts, Inc.</span> </p>
    <div class="hr"></div>
    <div style="margin-bottom: 8px; letter-spacing:1px;">CORPORATE OFFICES</div>
  9710 East Indigo Street  <br />
    Suite 203<br />
    Miami, Florida 33157<br />
    <br />
    <p><span class="rightBold"> Toll Free Phone (800) 700-0657</span><br />
      Toll Free Fax (888) 777-LEASE<br />
      </p>
    <div class="hr" style="margin-top:10px;"> </div>
    <div style="margin-top:8px; margin-bottom: 8px; letter-spacing:1px;">SATELLITE OFFICES</div>
    <p>Jacksonville, Florida<br />
      Orlando, Florida<br />
      North Port, Florida<br />
      Pennington, New Jersey  </p>
    <div class="hr" style="margin-top:10px; margin-bottom:5px;"> </div><span class="TextBlue">Just fill out our simple,
      <br />
      one page application</span>  
    <div style="margin-top:10px;"><a href="apply.html" onfocus="blur()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Apply Now!','','images/apply_nowOver.jpg',1)"><img src="images/apply_now.jpg" alt="Apply Now!" name="Apply Now!" width="159" height="37" border="0" id="Apply Now!" /></a></div>
    </div> 
</div>
<div id="footer">
  <ul>
    <li><a href="home.html" title="home" class="first">home</a></li>
    <li><a href="why_lease.html" title="why lease">why lease</a></li>
    <li><a href="apply.html" title="apply now">apply now</a></li>
    <li><a href="faq.html" title="f.a.q.">f.a.q.</a></li>
    <li><a href="working_capital.html" title="working capital loans">working capital loans</a></li>
    <li><a href="hotels.html" title="hotels">hotels</a></li>	
    <li><a href="testimonials.html" title="testimonials">testimonials</a></li>	
    <li><a href="for_vendors.html" title="for vendors">for vendors</a></li>	
    <li><a href="contact_us.html" title="contact us">contact us</a></li>
    <li class="last">   <a href="privacy_policy.html?keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=400" title="Privacy Policy" class="thickbox">privacy policy</a></li>
    <li class="none"><a href="leasing_calculator.html" title="Leasing Calculator">leasing calculator</a></li>
  </ul>
  <p> The Leasing Experts, Inc. All Rights Reserved ©2007 </p>
</div>
</body>
</html>

Code CSS:

/* CSS Document */
 
/* CSS Reset is Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: [url]http://developer.yahoo.net/yui/license.txt[/url] version: 0.12.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;}fieldset,img{border:1;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/* End CSS Reset */
 
 
 
html, body {
	margin:0; 
	padding:0;
	height:100%;
}
 
a:link {
	color:#000000; 
	text-decoration:none;
}
a:visited {
	color:#000000; 
	text-decoration:none;
}
a:hover {
	color:#000000; 
	text-decoration:underline;	
}
a:active {
	color:#000000; 
	text-decoration:none;
}
#wrapper {
 
	margin: 0 auto;
	width: 760px; 
	float:left;
	min-height:100%;
	min-height: 100%;
	background:#ffffff url(images/menu_bkgd.gif) repeat-y 0 0 ;
 
}
* html #wrapper {
height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
#header {
	width: 760px;
	height:154px;
	padding: 0;
	background:url(images/header.jpg) no-repeat right #FFFFFF;
}
H1 {
	left: 16px;
	width: 136px;
	position: absolute;
	top: 20px;
	height: 133px
}
H1 a {
	display: block; 
	font-weight: normal; 
	font-size: 1px; 
	background: url(images/logo.gif) no-repeat left top; 
	width: 136px; 
	text-indent: 16px; 
	height: 133px;
	}	
 
#NAELBlogo{
	position: relative;
	display: block; height: 58px;
	width:100px;
	background: url(images/naelb_logo.gif) no-repeat center top;
	margin:6px 0px 1px 55px;
}
 
 
#main-content { 
	padding-bottom: 40px; 
	width:595px;
	float:left;
	border-right:#dcddde solid 1px;
} 
* html #main-content {
position: relative;  /*** IE needs this  ***/
}
 
 
 
#menu {
	width: 161px;
	float:left;
}
 
#menu li a {
  	height: 21px;
	text-decoration: none;
}	
 
#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size:14px;
	color:#636467;
	display: block;
	padding: 3px 13px 0 13px;
	text-align: right;
}
 
#menu li a:hover {
	color:#636467;
	padding: 3px 13px 0 10px;
	text-align: right;
	background-color:#a1cb3c;
}
 
#menu li a:active {
	color:#636467;	
	padding: 3px 13px 0 10px;
	text-align: right;
}
.menucurrent {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size:14px;
	color:#636467;
	text-align: right;
	width: 161px;
	background-color:#a1cb3c;
}
 
 
#mainTextArea {
	text-align:left;
	padding-left:20px;
	padding-top:18px;
	padding-bottom:10px;
	padding-right:8px;
	width:394px;
	float:left;
 
 
}
#mainTextArea p {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000000; 
	line-height:16px; 
}
.mainTextAreaBold {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000000; 
	font-weight:bold;
}
 
#mainTextAreaForm {
	text-align:left;
	padding-left:20px;
	padding-top:18px;
	padding-bottom:10px;
	width:550px;
	float:left;
 
}
#mainTextAreaForm p {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000000; 
	line-height:16px; 
}
.headerText {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#000000; 
	font-weight:bold;
}
.container {
	width:232px;
	height:190px;
	margin-right:0px;
	margin-left:6px;
	float:right;
	background-image: url(images/home_text.gif);
	background-repeat:no-repeat;
 
}
#right {
	float:right;
	width:172px;
	padding-top:18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:center;
	border-left:#dcddde solid 1px;
 
}
 
.rightBold{
	font-size: 11px; 
	font-family: Arial, Helvetica, sans-serif; 
	font-weight:bold;}
 
.hr {
	height:1px; 
	border-style:solid; 
	border-width:1px 0 0 0;
	border-color:#000000; 
	width:75%; 
	margin-top:2px; 
	margin-left:21px;
	margin-bottom:2px;
	margin-right:21px;
 
}
 
.greenbullet {
	list-style-image:url(images/green_bullet.gif);
	padding-left: 15px;
	margin-left:8px;
	margin-bottom: 1px;
	margin-top:1px;
	text-indent:3px;
	}
 
.TextBlue {
	font-size: 14px;
	color: #004F6C;	
	font-family:  Arial,Helvetica, sans-serif; 
	line-height:16px;
}
 
/*- Footer --------------------------- */
 
#clearfooter{clear:both;height:32px;}/*needed to make room for footer*/
* html #clearfooter {float:left;width:760px;}/* ie mac styles */
#footer {
	clear: both; 
	float:left;
	padding-right: 0px;
	position:relative;
	padding-left: 0px;
	width: 760px;
	padding-top: 4px;
	text-align: center;
	border-top:	#D6D6D6 solid 1px;
	background-color:#FFFFFF;
 
}
 
#footer li { 
	display:inline; /* gets the list items showing horizontally */ 
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#808285;
	list-style-type:none; /* removes the bullets */ 
	padding:0 3px 0 9px; /* some space between each item */ 
	margin:-4px !important; /* removes the space left by the bullet point */ 
	margin:0px; /* don't need to remove the space for IE */ 
	border-right: 1px solid #aaa; /* a little bit of shadow on the bar */ 
} 
 
#footer li.first { 
	border-left:0; /* no bar required before first item */ 
} 
 
#footer li.last { 
	border-right:0; /* no bar required after last item */ 
} 
#footer li.none { 
	border-right:0; /* no bar required after last item */ 
	border-left:0; /* no bar required before first item */ 
} 
#footer li a { 
	text-decoration:none; /* removes the underline from links */
	color: #666666; 
} 
#footer li a:hover { 
	text-decoration:underline; /* adds the underline back on mouseover */ 
}
 
#footer p{
	margin-top:5px;
	font-family:  Arial, Helvetica,sans-serif;
	font-size:10px;
	color:#000000;
	}
/*- End footer --------------------------- */
 
/*- Begin Form and Table Styles ---------- */
 
div.row span.formw {
  float: left;
  margin-left:5px;
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#000000;
  } 
 
input, textarea, select{
	border: #999999 1px solid ;
	margin-top:1px;
}
 
.fieldsetTitles {
	font-size: 14px;
	color: #003366 ;	
	font-family:  Arial,Helvetica, sans-serif; 
	line-height:12px;
	margin:3px;
	padding:5px;
 
}
.formText {
	font-size: 12px;
	color: #000000;	
	font-family:  Arial,Helvetica, sans-serif; 
	line-height:18px;
	margin:5px;
	padding:5px;
}	
td, th {
  padding: 4px;
}

**Centauri** · Oct 7, 2007 01:26

You are nearly there. All you need to do is give the footer div a defined height (probably in ems to allow for text resize) and a negative top margin equal to that height - this will "pull" the footer back over the bottom of the wrapper. A bottom padding on the text area div equal to the footer's height will preventy content being hidden behind the footer.

**CSSchick** · Oct 7, 2007 06:14

Thanks to Centauri & Paul ... you're the best!

Here's what fixed it:

--clearfooter was in the wrong place. It should be inside #mainwrapper and soak up the space caused by the negative margin.

--removed the height:100% from all elements except the main wrapper as you can't use it again and it makes no sense anyway unless you have a parent of fixed height.

--account exactly for the footer height and makes sure it matches the negative margin on #wrapper.

Code:

#wrapper {
margin: 0 auto -45px auto;
width: 760px;
float:left;
min-height:100%;
height:auto;
background:#ffffff url(http://multimediaelements.com/Leasin.../menu_bkgd.gif) repeat-y 0 0 ;
border-right:#dcddde solid 1px;

}
* html #wrapper {
height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

#mainTextArea {
text-align:left;
padding-left:20px;
padding-top:18px;
padding-bottom:25px;
padding-right:8px;
width:394px;
float:left;
/* min-height:100%;
height: 100%;
*/

}
#right {
float:right;
/* height:100%;*/
width:172px;
padding-top:18px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
}

#clearfooter{clear:both;height:46px;}/*needed to make room for footer*/
* html #clearfooter {float:left;width:760px;}/* ie mac styles */
#footer {
clear: both;
height:34px;
float:left;
padding-right: 0px;
position:relative;
padding-left: 0px;
width: 761px;
padding-top: 5px;
padding-bottom:5px;
text-align: center;
border-top: #D6D6D6 solid 1px;
background-color:#FFFFFF;
}
#footer li {
display:inline; /* gets the list items showing horizontally */
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
color:#808285;
list-style-type:none; /* removes the bullets */
padding:0 3px 0 9px; /* some space between each item */
margin:0px; /* don't need to remove the space for IE - This is rubbish - The bullet space is made by paddding-left or margin-left depending on browser and you just need to reset both to zero.*/
border-right: 1px solid #aaa; /* a little bit of shadow on the bar */
}

Code:

<div style="margin-top:10px;"><a href="apply.html" onfocus="blur()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Apply Now!','','images/apply_nowOver.jpg',1)"><img src="http://multimediaelements.com/LeasingExperts/images/apply_now.jpg" alt="Apply Now!" name="Apply Now!" width="159" height="37" border="0" id="Apply Now!" /></a></div>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
<ul>
<li><a href="home.html" title="home" class="first">home</a></li>
<li><a href="why_lease.html" title="why lease">why lease</a></li>
<li><a href="apply.html" title="apply now">apply now</a></li>
<li><a href="faq.html" title="f.a.q.">f.a.q.</a></li>
<li><a href="working_capital.html" title="working capital loans">working capital loans</a></li>
<li><a href="hotels.html" title="hotels">hotels</a></li>
<li><a href="testimonials.html" title="testimonials">testimonials</a></li>
<li><a href="for_vendors.html" title="for vendors">for vendors</a></li>
<li><a href="contact_us.html" title="contact us">contact us</a></li>
<li class="last"> <a href="privacy_policy.html?keepThis=true&TB_iframe=true&height=250&width=400" title="Privacy Policy" class="thickbox">privacy policy</a></li>
<li class="none"><a href="leasing_calculator.html" title="Leasing Calculator">leasing calculator</a></li>
</ul>
<p> The Leasing Experts, Inc. All Rights Reserved ©2007 </p>
</div>
</body>
</html>

</code>

User Tag List

Thread: Sticky Footer problem. It sticks, but....

Thread Tools

Display

Sticky Footer problem. It sticks, but....

Sticky Solved!

Bookmarks

Bookmarks

Posting Permissions