SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Solved!

    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&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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •