Sticky Footer impasse

Bogged down trying to put a sticky footer on a page. Without the footer, all the body text displays correctly. Add the footer and about the bottom third of the text is unavailable, that is, when you scroll to the bottom you're seeing only about the top two-thirds of the text and the rest ain't there. Page is Lori Caldwell Designs for San Antonio and the Hill Country. Yes, it's shameful, I am using tables. DW5.5

The text is there. But it's covered up by your sticky footer. You'll need to provide ample CSS padding between your content and sticky regions. See my example below. View source to see the code.
jQuery Smooth Scrolling with Fixed Layout
Nancy O.

Similar Messages

Problems creating a sticky footer

Hi,
I'm trying to create a website in Dreamweaver using a template that I purchased but I am having problems fixing a footer to the bottom of the page,
At the moment the content footer that I have created (which is a table) changes positon from page to page depending on the content.
The template comes with 2 x CSS style sheets and 1 x JS coded page which I know I need to amend in order for the footer to remain fixed to the bottom of each page.
The trouble is my CSS and JS are not up to much. I have inserted the code from the HTML, CSS & JS below.
If anyone can help me out it would be fantastic as I'm really at a loss!
The HTML of my main webpage is as follows:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></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_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;
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 id="page1" onload="new ElementMaxHeight(); ;MM_preloadImages('images/facebook2.gif','images/linkedin2.gif','images/twitter2.gif')">
<div id="header">
    <div class="main">
     <div class="flash">
       <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="137">
         <param name="movie" value="flash/menu_v8.swf" />
         <param name="quality" value="high" />
         <param name="wmode" value="transparent" />
         <param name="swfversion" value="8.0.35.0" />
         
         <param name="expressinstall" value="Scripts/expressInstall.swf" />
         
         
         <object type="application/x-shockwave-flash" data="flash/menu_v8.swf" width="980" height="137">
           
           <param name="quality" value="high" />
           <param name="wmode" value="transparent" />
           <param name="swfversion" value="8.0.35.0" />
           <param name="expressinstall" value="Scripts/expressInstall.swf" />
           
           <div>
             <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
             <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" id="Image2" /></a></p>
           </div>
           
         </object>
         
       </object>
     </div>
       <div class="flash1">
         <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="587" height="389">
           <param name="movie" value="flash/header_v8.swf" />
           <param name="quality" value="high" />
           <param name="wmode" value="transparent" />
           <param name="swfversion" value="8.0.35.0" />
           
           <param name="expressinstall" value="Scripts/expressInstall.swf" />
           
           
           <object type="application/x-shockwave-flash" data="flash/header_v8.swf" width="587" height="389">
             
             <param name="quality" value="high" />
             <param name="wmode" value="transparent" />
             <param name="swfversion" value="8.0.35.0" />
             <param name="expressinstall" value="Scripts/expressInstall.swf" />
             
             <div>
               <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
               <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" id="Image3" /></a></p>
             </div>
             
           </object>
           
         </object>
       </div>
        <div class="indent1">
         <div class="container1">
           <p>Welcome to ACL International.<br />
                 Through our offices in the UK and Portugal we supply the<br />
                 very latest in energy saving technologies with our main<br />
                 focus being on lighting. ACL have been active in the lighting<br />
              industry for over 10 years and have built up strong relationships with some of the world's leading lighting manufacturers.</p>
           <p> </p>
           <p>Welcome to ACL International.<br />
Through our offices in the UK and Portugal we supply the<br />
very latest in energy saving technologies with our main<br />
focus being on lighting. ACL have been active in the lighting<br />
industry for over 10 years and have built up strong relationships with some of the world's leading lighting manufacturers.</p>
          </div>
      </div>
    </div>
</div>
<div id="content">
    <div class="main">
        <div class="indent-main">
            <div class="container bg">
                <div class="container bg1">
                    <div class="container bg2">
                        <div class="col-1 bg-1">
                         <div class="indent-col">
                             <img alt="" src="images/1page_title1.gif" class="title" /><br />
                                <p>An easy and affordable<br />
                              way to change existing<br />
                              lighting to an energy<br />
                              saving alternative...</p>
                                <div class="container"><a href="#" class="link-1"><em><b>read more</b></em></a></div>
                            </div>
                        </div>
                        <div class="col-1 bg-2">
                         <div class="indent-col">
                             <img alt="" src="images/1page_title2.gif" class="title" /><br />
                                <p>A more natural,<br />
                                environmentally<br />
                                friendly light<br />
                                source... </p>
                                <div class="container"><a href="#" class="link-1"><em><b>read more</b></em></a></div>
                            </div>
                        </div>
                        <div class="col-1 bg-3">
                         <div class="indent-col">
                             <img alt="" src="images/1page_title3.gif" class="title" /><br />
                                <p>Up to 80% energy <br />
                              saving with an<br />
                              extremely long<br />
                              lifetime... </p>
                                <div class="container"><a href="#" class="link-1"><em><b>read more</b></em></a></div>
                            </div>
                        </div>
                        <div class="col-1 bg-4">
                         <div class="indent-col">
                             <img alt="" src="images/1page_title4.gif" class="title" /><br />
                                <p>Low glare,<br />
                                creating a more<br />
                                comfortable<br />
                                environment... </p>
                                <div class="container"><a href="#" class="link-1"><em><b>read more</b></em></a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="main">
        <div class="indent-footer">
          <table width="929" border="0">
            <tr>
              <td width="869">ACLI © 2012 <a href="index-5.html">Privacy Policy</a></td>
              <td><img src="images/followus.gif" alt="" width="73" height="20" /></td>
              <td width="20"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook2.gif',1)"><img src="images/facebook.gif" width="20" height="20" border="0" id="facebook" /></a></td>
              <td width="20"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkedin','','images/linkedin2.gif',1)"><img src="images/linkedin.gif" width="25" height="20" border="0" id="linkedin" /></a></td>
              <td width="20"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/twitter2.gif',1)"><img src="images/twitter.gif" width="27" height="20" border="0" id="twitter" /></a></td>
            </tr>
          </table>
        </div>
    </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
</script>
</body>
</html>
The CSS of the layout is as follows:
.col-1, .col-2, .col-3, .col-4, .col-5{ float:left}
/*======= width =======*/
.main{margin:0 auto; text-align:left; width:929px; }
/*======= header =======*/
#header {height:339px; background:url(images/bg.jpg) }
#page1 #header {height:526px;}
/*======= index.html =======*/
#page1 #content .col-1{ width:231px; margin-right:1px}
#page1 #content .bg{ background:url(images/tail.gif) repeat-y 231px top }
#page1 #content .bg1{ background:url(images/tail.gif) repeat-y 463px top }
#page1 #content .bg2{ background:url(images/tail.gif) repeat-y 695px top }
/*======= index-1.html =======*/
#page2 #content .col-1{ width:339px; margin-right:0}
#page2 #content .col-2{ width:590px}
#page2 #content .col-3{ width:154px; margin-right:32px}
#page2 #content .col-4{ width:158px; margin-right:30px}
#page2 #content .col-5{ width:155px; margin-right:0}
/*======= index-2.html =======*/
#page3 #content .col-1{ width:590px; margin-right:0}
#page3 #content .col-2{ width:339px}
#page3 #content .col-3{ width:188px; margin-right:0}
#page3 #content .col-4{ width:155px; margin-right:0}
/*======= index-3.html =======*/
#page4 #content .col-1{ width:339px; margin-right:0}
#page4 #content .col-2{ width:590px}
#page4 #content .col-3{ width:95px; margin-right:2px; text-align:right; line-height:1em; padding-top:3px}
#page4 #content .col-4{ width:188px; margin-right:0}
/*======= index-4.html =======*/
#page5 #content .col-1{ width:590px; margin-right:0}
#page5 #content .col-2{ width:339px}
#page5 #content .col-3{ width:95px; margin-right:2px; text-align:right; line-height:1em; padding-top:3px}
#page5 #content .col-4{ width:188px; margin-right:0}
/*======= footer =======*/
#footer { height:110px; }
The CSS of the style is as follows:
/* CSS Document */
* { margin:0; padding:0;}
html, body { height:100%; }
body {font-size:100%; line-height:1.125em;}
html, input, textarea {
font-family: "Century Gothic";
color:#646464;
.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
object { vertical-align:top; outline:none}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container { overflow:hidden; width: 100%;}
a img{ border:0}
img{ vertical-align:top; }
a{color:#000000; text-decoration:underline; outline:none}
a:hover{text-decoration:none}
.link{color:#000000; background:url(images/marker.gif) top left no-repeat; padding-left:20px; background-position:0 5px; text-decoration:none; font-size:.916em }
.link:hover{text-decoration:underline }
.button{color:#fff; font-size:.916em; line-height:20px ; padding:2px 8px 8px 6px; text-decoration:none; }
.button:hover{color:#000; background:url(images/button.gif) top left no-repeat; padding:2px 8px 8px 6px; text-decoration:none; line-height:20px ; }
.current{color:#000; background:url(images/button.gif) top left no-repeat; padding:2px 8px 8px 6px; text-decoration:none; line-height:20px ; }
ul{margin:0; padding:0; list-style:none;}
ul li a{color:#646464; text-decoration: underline; line-height:1.66em}
ul li a:hover { text-decoration:none; }
.ul1 li{background:url(images/marker.gif) top left no-repeat; background-position:0 5px; margin:0; padding-left:10px; }
.ul1 li a{color:#646464; text-decoration:none ; line-height:1.5em}
.ul1 li a:hover { text-decoration:underline; }
.ul li{background:url(images/tail-1.gif) repeat-x bottom; margin:0; padding-left:0; }
.ul li span{color:#646464; float:right; background:url(images/tail-2.gif) repeat-x bottom;}
.ul li a{color:#646464; text-decoration: underline; line-height:1.66em; background:url(images/tail-2.gif) repeat-x bottom;}
.ul li a:hover { text-decoration:none; }
.link-1 { display:block; float:left; background:url(images/link_bg.gif) left top repeat-x; color:#ffffff; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top;}
.link-1 b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:0 5px 3px 7px; font-weight:normal; font-style:normal;}
.link-1:hover{ text-decoration:none; color:#627311}
.link-2 { display:block; float:left; background:url(images/link_bg.gif) left top repeat-x; color:#ffffff; text-decoration:none; }
.link-2 em { display:block; background:url(images/link_left.gif) no-repeat left top;}
.link-2 b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:0 15px 3px 17px; font-weight:normal; font-style:normal;}
.link-2:hover{ text-decoration:none; color:#627311}
/*header*/
#header {font-size:0.75em; color:#646464 }
#header .logo{ margin:19px 0 9px 0 }
#header .indent{margin:30px 0 0 755px; position:absolute; width:175px; color:#625a49}
#page1 #header .indent1{padding:40px 0 0 565px}
#header .indent1{padding:22px 0 0 0px}
#header .indent2{padding:11px 0 0 397px}
#header .img-left{ float:left; margin:0 31px 0 0}
#header .img-indent{ margin:0 24px 0 0}
#header .img-indent1{ margin:0 23px 0 0;}
#header .title{ margin-bottom:11px}
#header a{ color:#625a49; text-decoration:none}
#header a:hover{text-decoration: underline}
.flash{ margin:0 -27px 0 -25px; position:relative}
.flash1{ margin:0 0 0 -25px; position: absolute}
#page1 .bg-1{
background-image: url(images/1page_img1.jpg);
background-repeat: no-repeat;
background-position: right bottom;
#page1 .bg-2{ background:url(images/1page_img2.jpg) no-repeat bottom right}
#page1 .bg-3{ background:url(images/1page_img3.jpg) no-repeat bottom right}
#page1 .bg-4{ background:url(images/1page_img4.jpg) no-repeat bottom right}
.bg-5{ background:url(images/bg-1.gif) repeat-x top #e5e5e5; width:100%}
.bg-6{ background:url(images/bg-2.gif) repeat-x top #fff; width:100%}
/*content*/
#content{ font-size:0.75em; width:100%; text-align:left; background:url(images/bg_cont.gif) repeat-x top #fff}
#content .indent-main{padding:11px 0 0 0}
#content .indent-main1{padding:3px 0 0 0}
#content .indent-col{padding:14px 0 28px 20px}
#content .indent-col1{padding:32px 14px 24px 15px}
#content .indent-col2{padding:32px 28px 0 28px}
#content .title{ margin-bottom:8px}
#content .img-left{ float:left; margin:0 20px 16px 0}
#content .img-right{ float:right; margin:0 0 0 10px}
#content .img-indent{ margin:0 0 16px 0}
#content p{ margin:0 0 17px 0}
#content .p{ margin:0}
#content .p1{ margin:0 0 17px 0}
#content h4{color:#8b870e; font-size:1em; margin-bottom:13px; }
#content .tail{ background:url(images/tail2.gif) repeat-x bottom; padding-bottom:26px; margin-bottom:21px}
.txt{ color:#8e9c2e; font-weight:normal}
.txt a{ color:#8e9c2e; }
#content .indent{padding:15px 0 0 0}
/*box*/
.box{ background:#fcfcfc; width:100%;}
.box .indent-box{ padding:11px 18px 11px 20px; }
.box .indent-box1{ padding:11px 10px 11px 10px; }
/*footer*/
#footer { color:#5a5a5a; text-transform:uppercase; font-size:0.6875em ; }
#footer .indent-footer{ padding:37px 0 0 0; background:url(images/bot.gif) repeat-x top;}
#footer a {color:#5a5a5a; text-decoration:underline}
#footer a:hover { text-decoration:none}
.jamp{ width:69px;}
.jamp1{ width:64px;}
.jamp2{ width:58px;}
.jamp3{ width:52px;}
select{font-size:12px; color:#646464; height:19px; font-family: Arial, Helvetica, sans-serif;}
.indent-2{ position:relative; padding-right:20px; float:left}
.h{ height:29px}
.block-contact span{ float:right; margin-right:50px}
input{
width:183px; height:17px;
font-size:1em;
color:#646464;
padding-left:5px;
textarea{
width:183px; height:57px;
font-size:1em;
color:#646464;
padding-left:5px;
margin-bottom:11px;
overflow:auto}
.textarea{
width:183px; height:142px;
font-size:1em;
color:#646464;
padding-left:5px;
margin-bottom:11px;
overflow:auto}
The JS page is as follows:
var ElementMaxHeight = function() {
this.initialize.apply(this, arguments);
ElementMaxHeight.prototype = {
initialize: function(className) {
    this.elements = document.getElementsByClassName(className || 'maxheight');
    this.textElement = document.createElement('span');
    this.textElement.appendChild(document.createTextNode('A'));
    this.textElement.style.display = 'block';
    this.textElement.style.position = 'absolute';
    this.textElement.style.fontSize = '1em';
    this.textElement.style.top = '-1000px';
    this.textElement.style.left = '-1000px';
    document.body.appendChild(this.textElement);
    this.textElementHeight = document.getDimensions(this.textElement).height;
    var __object = this;
    var __checkFontSize = this.checkFontSize;
    this.checkFontSizeInterval = window.setInterval(function() {return __checkFontSize.apply(__object)}, 500);
    this.expand();
    // Refresh elements height onResize event
    var __expand = this.expand;
    if (window.addEventListener) {
      window.addEventListener('resize', function(event) {return __expand.apply(__object, [( event || window.event)])}, false);
    } else if (window.attachEvent) {
      window.attachEvent('onresize', function(event) {return __expand.apply(__object, [( event || window.event)])});
expand: function() {
    this.reset();
   for (var i = 0; i < this.elements.length; i++) {
      this.elements[i].style.height = document.getDimensions(this.elements[i].parentNode).height + 'px';
reset: function() {
    for (var i = 0; i < this.elements.length; i++) {
      this.elements[i].style.height = 'auto';
checkFontSize: function() {
   var height = document.getDimensions(this.textElement).height;
   if(this.textElementHeight != height) {
    this.textElementHeight = height;
    this.expand();
if (!!document.evaluate) {
document._getElementsByXPath = function(expression, parentElement) {
    var results = [];
    var query = document.evaluate(expression, parentElement || document,
      null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (var i = 0, length = query.snapshotLength; i < length; i++)
      results.push(query.snapshotItem(i));
    return results;
document.getElementsByClassName = function(className, parentElement) {
if (!!document.evaluate) {
    var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
    return document._getElementsByXPath(q, parentElement);
} else {
    var children = (parentElement || document.body).getElementsByTagName('*');
    var elements = [], child;
    for (var i = 0, length = children.length; i < length; i++) {
      child = children[i];
      if (child.className.length != 0 &&
          (child.className == className ||
           child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))) {
        elements.push(child);
    return elements;
document.getDimensions = function (element) {
var display = element.style.display;
if (display != 'none' && display != null) { // Safari bug
    return {width: element.offsetWidth, height: element.offsetHeight};
return {width: originalWidth, height: originalHeight};

A sticky footer is position:fixed and therefor always visible in the bottom of browser viewports -- even when users scroll up or down the page.
Sticky Footer Demo:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
I believe what you're trying to achieve is 100% height on long & short pages. Try this:
<!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=iso-8859-1" />
<title>100% height page layout</title>
<style type="text/css">
/**==========================
100% height layout
===========================*/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
zoom: 1;
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:1000px;
background:#FF9999;
height:auto !important; /* real browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* real browsers */
#header {
padding:1em;
background:#ddd;
min-height: 95px;
border-bottom:6px double gray;
#content {
padding:1em 1em 5em; /* bottom padding for footer */
#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
min-height: 95px;
border-top:6px double gray;
#footer p {padding:1em}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>here is the header</p>
</div>
<div id="content">
<p>Here is the content</p>
</div>
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Sticky footer in Fluid Grid layouts (was: sticky footer)

Is there a simple solution to putting a sticky footer on the bottom of a page (not fixed on the bottom of the screen) that actually works with fluid grid layouts? I've looked at several options but nothing seems to work in all browsers commonly in use; both mobile and desktop.

Short answer: No.
Browser hacks usually cause other unwanted problems so not a good option. Fixed positioning works in most browsers but will fail in some older mobile devices (Android 2.1, pre-iOS5, Opera Mini, Windows Phone 7). See below for a full list of supporting mobile devices.
Fixed Positioning in Mobile Browsers | Brad Frost Web
Nancy O.

Apparent gap below CSS sticky footer in IE?

I've been testing CSS "sticky footer" solutions I found on the Web. The one I picked works in the four browsers I checked with (Firefox, Chrome, Opera and IE) but there's one possible glitch. In IE 8. I'm seeing what appears to be a small gap between the footer and the bottom of the browser window. My Color Cop utility says neither of the two colors in that gap match anything specified in the CSS. I've included a screen capture, and a link if you have IE installed. I'd like to know if this is a problem with IE (who woulda thunk?) or something inherent in the look of IE's browser window?
http://dreamweaverresources.com/tutorials/sticky-footer/

I assume "browser chrome" means the imagery used to create the "pieces" of the browser's appearance outside the browser window contents.
Yes.
http://www.expression-web-tips.com/what-is-browser-chrome/
But, if by scrollbar you mean the sliding blue rectangle on white background with a directional arrow on either end, I don't see that anywhere -- side or bottom -- when I view that link in IE 8?
You'll see it if you shrink the height of your browser below a certain dimension.
I saw it on my widescreen monitor.

25px gap at the bottom of Sticky Footer

Hey guys, could someone please help me get rid of the 25px gap at the bottom of my sticky footer?
here's the site:
http://tylertx.businesscatalyst.com/
I'm using a version of http://www.cssstickyfooter.com
If you have any ideas i would love to hear them.

Thank you so much. This was driving me nuts and i looked through all the css and html a million times.
This is a trial site right now and it looks like Business Catalyst sneaks that in after you upload it to the server. That's why I couldn't find it. Didn't think to look at it from the browser. a
I guess once I launch the site adobe will remove it.
thanks again for your help.

PhatFusion Multibox vs. Sticky Footer

I'm slowly losing my mind on this one.
I picked up a site that needed to be properly rebuilt. The site is using a stickfooter of a grass.png file. I was able to get the sticky footer to work. After I got it to work I created my dreamweaver template (dwt) and started building the rest of the site.
Where it went wrong is on the pages that contain the lightbox tool known as phatfusion multibox. The sticky footer doesn't work on any page that contains this div. On each page that has the phatfusion div the footer no longer is "sticky" and remains right along side the bottom of the container div. I wasn't able to find anywhere in the multibox CSS file where it shows any extra margins, padding, or sizing that would throw this off. Can anyone help me figure out this problem?
www.billcoledesign.com/outsideoc (use this as an example of the working sticky footer)
www.billcoledesign.com/outsideoc/nsi.php and click on the "operations" tab. All tabs after "operations" have this problem.
Thanks in advance for your help!

Thanks for the response.
The footer.css file comes straight from the sticky footer tutorial at http://www.cssstickyfooter.com/
The footer works properly on the entire site except for the page that is using the PhatFusion Multibox. I actually think the problem is within the PhatFusion Multibox CSS or JS files. I just can't find where it is.

The type inside the footer drops down 50 px below the bottom of page in preview mode. I already tried unchecking the sticky footer in the site properties for that master page.

I need to fix this footer text on the home page. The type on the master page is centered inside a white 50px box. But in preview mode, the line of text drops 50px down below the bottom of page. I unchecked the sticky footer in the site properties and also set the line of text as footer item. The setting was the same on my second master and it comes out fine.

Hi
The "content" div is styled to have 100px height and visible overflow. So the text is overflowing the div but the footer is "unaware" / ingoring it and positions itself after "sidebar2"
Change the height of "content" to 100% and it should work.
Kind Regards,
Alex

Having problem with extra space below footer (sticky footer already checked)

Hi there, im having this problem after updated my adobe muse cc. For some reason there is extra space below the footer.
It looks fine when i try to view them offline, but when I upload them, the extra space appears. Here's the url for both of the website with extra space below
1. http://unionvisual.web.id/home-page.html
2. PT-Smas

Hi there
Thx for your reply, is here i upload my screenshot
and here

Footer in Master page looks different in other pages

I've tried everything and need help pls. I just try to make a textbox in the footer of the master page. it should look like this:
Master Page:
But in every other Page the alignment changed, the footer changed and the textbox in the footer too. It looks like this:
This only happens, when I put the textbox in the footer of the master page. When there is no textbox, if have no problems with the alignment and every page looks like the master page.
I really don't know what i am doing wrong.
Info: The checkbox "Footer" of the textbox is on and i deactivated "sticky footer" in the properties. All pages are using the master page.

Hi Isabella,
Can you please upload the Muse file and share the link.
Regards,
Akshay

Footer not staying at bottom of page

http://www.mrjindustrial.com.au/index_newicons.html
The footer is not sticking to the bottom of the page when viewed on a reasonable-sized monitor. There's a large space beneath it. I have not been able to work out exactly why this is happening, and hope someone here might know.
I have been using PVII CSS Layout Magic and have posted this question in their forums, no reply as yet, so I am hoping someone in this forum can help.
Thanks, Pixelwarrior

The height of a page is determined by how much content it contains. Short pages don't stretch to fill the available viewport without code hacks which can lead to other problems.
If you want a fixed footer (always visible), try this:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Nancy O.

White space in footer

I'm puzzled. Can someone please take a look and tell me where my white space is coming from?? The master page looks great, but all other pages have it. The slider won't move back up on any of them. I've un-checked the sticky footer option and all of my page dimensions are set properly. I also deleted a couple widgets which may have caused it. Anyone?
robertgradel.businesscatalyst.com

Hi,
There seems to an empty rectangle at the bottom of the page, causing the white space. Please refer to the following link http://prntscr.com/4nq18h
Regards,
Aish

Need help with margins & footer, and browser display issues....

Hello,
I am working on a splash page in Dreamweaver, but am having trouble with the margins and the footer.
1. Margins: I basically want/need the center contents of the page never to extend past the contents of the header and footer.
If you look at the page header, the logo on the top left and "Student and Faculty Portal" should be the margins. Seems to look fine on some users' systems, but not consistent across our department.
2. Footer: I can't seem to figure out how to keep the footer at the bottom without rising above the background image across all browsers & screen sizes. Looks fine on some, but too high or low on others. (Looks the worst when the background image shows underneath the footer).
3. Browser/Screen Size: Depending on which PC I am using, my page changes. At the office, on my 26" monitors, my page looks fine, however, when on different laptops, my right div (that contains the login table) goes under the left. How can I code my page so that it looks consistent on all?
I guess my main complaint/need is for my page to look consistent regardless of screen size, browser or system.
If you could take a look, I would greatly appreciate it.
Your expertise and time is greatly appreciated. I hope I was clear enough, but please let me know if there is any confusion.
http://www.saintleo.edu/PortalLanding/PortalSplash.html
Kind regards,
JK

1. Create a div around your content, give it a width and margin: 0 auto;
2. Follow this tutorial. It will be a lifesaver and it sounds like what you are trying to do: http://css-tricks.com/snippets/css/sticky-footer/
3. See #1. In addition, remove right-margin from login box, add float: right; and remove float: left; from main content.

How would I get my footer to appear at the bottom of my browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
body {
line-height: 1;
background-color: #FFF;
background-image: url(back.png);
background-repeat: repeat;
background-position: left top;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
/* remember to define focus styles! */
:focus {
outline: 0;
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
del {
text-decoration: line-through;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
#container {
width: 1100px;
margin-right: auto;
margin-left: auto;
text-align: center;
#container ul {
list-style-position: outside;
margin-right: auto;
margin-left: auto;
#container ul li {
display: inline;
list-style-type: disc;
padding-left: 40px;
#branding {
background-image: url(cb_logo.png);
background-repeat: no-repeat;
background-position: left top;
margin-right: auto;
margin-left: auto;
height: 290px;
width: 342px;
position: relative;
top: 150px;
z-index: 4;
#site_info {
background-color: #461e03;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #cc9933;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 100px;
#site_info p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #FFF;
line-height: 2em;
#site_info p em {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: normal;
#nav_tools {
background-color: #95b238;
height: 31px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #b68d41;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #b68d41;
text-align: center;
margin-top: 100px;
#nav_tools ul {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline;
padding-left: 20px;
#nav_tools ul li {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline;
padding-left: 20px;
#nav_tools ul li a {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline-block;
text-decoration: none;
.clear {
clear: both;
</style>
</head>
<body>
<div id="container">
<ul>
    <li>Walk-in</li>
    <li>Delivery</li>
    <li>Catering</li>
    <li>Special Orders</li>
</ul>
<div id="branding"></div>
</div>
<div id="site_info">
<p><em>Coming soon</em><br/>
    714 Berryville Avenue<br/>
    Winchester, VA 22601<br/>
    At Berryville Avenue and Baker Lane<br/>
    p 540.450.8037<br/>
    f 540.450.8063<br/>
    e [email protected]<br/>
</p>
<div id="nav_tools">
    <ul>
      <li><a href="#">Site Map</a></li>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Use</a></li>
    </ul>
</div>
</div>
</body>
</html>

I am using the sticky footer work around to keep my footer at the bottom of the browser window but when I close it my footer gose under my nav_tool DIV why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
body {
line-height: 1;
background-color: #FFF;
background-image: url(back.png);
background-repeat: repeat;
background-position: left top;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
/* remember to define focus styles! */
:focus {
outline: 0;
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
del {
text-decoration: line-through;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
#container {
width: 1100px;
margin-right: auto;
margin-left: auto;
text-align: center;
#container ul {
list-style-position: outside;
margin-right: auto;
margin-left: auto;
#container ul li {
display: inline;
list-style-type: disc;
padding-left: 40px;
#branding {
background-image: url(cb_logo.png);
background-repeat: no-repeat;
background-position: left top;
margin-right: auto;
margin-left: auto;
height: 290px;
width: 342px;
position: relative;
top: 150px;
z-index: 4;
#site_info {
background-color: #461e03;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #cc9933;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 0px;
height: 300px;
#site_info p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #FFF;
line-height: 2em;
#site_info p em {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: normal;
#nav_tools {
background-color: #95b238;
height: 31px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #b68d41;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #b68d41;
text-align: center;
margin-top: 100px;
#nav_tools ul {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline;
padding-left: 20px;
#nav_tools ul li {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline;
padding-left: 20px;
#nav_tools ul li a {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
list-style-type: none;
clear: left;
display: inline-block;
text-decoration: none;

margin: 0;
html, body {
height: 100%;
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
.footer, .push {
height: 4em;
background-color: #461e03;
color: #FFF;
</style>
</head>
<body>
<div class="wrapper">
<div id="branding"></div>
<div id="site_info">
    <p><em>Coming soon</em><br/>
      714 Berryville Avenue<br/>
      Winchester, VA 22601<br/>
      At Berryville Avenue and Baker Lane<br/>
      p 540.450.8037<br/>
      f 540.450.8063<br/>
      e [email protected]<br/>
    </p>
    <div id="nav_tools">
      <ul>
        <li><a href="#">Site Map</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms of Use</a></li>
      </ul>
    </div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2009 City Bagel’s. All rights reserved</p>
</div>
</body>
</html>

Footer extends longer in Preview Mode then in Design Mode

I have attached two JPEGS that show my footer in "Design" mode and in "Preview" mode.
In "Design" mode the footer is perfect. It is the size and distance it needs to be at. However, when viewing it in "Preview Mode", the footer extends downward farther then it should. I've looked all over the page to see if there was something from another graphic or image or shape that could be extending downward and I don't see anything.
Take a look at both images and tell me why this is happening? I did have a lightbox gallary on this page. I thought that the gallery was extending it downward so I removed it to test my theory. Even after removing it, it still does not work the way it should.
Craig
Message was edited by: MUSE Worker

Like Vikas said:
Check if you have Sticky Footer enabled:
File > Site Properties
Page > Page Properties (for master and child pages)
Let me know if neither of those work, it could be that you just need to preview in browser to see what the true height will be in the footer.
Hope this helps!
Julia

How to remove excess whitespace below my footer in muse

If you go to Admiral Computer Systems - IT Services in London And Kent on every page of the website below the footer is a large chunk of excess whitespace that i want to get rid of its there regardless of whether sticky footer is checked or not.
the site is a test site on my own domain setup to test out how the site looks on the internet to visitors without publishing it to our company domain.
any ideas how i fix this?

Hi,
uncheck the sticky footer option in Site properties and check if it works.
If you still have the problem, please let me know.

Sticky Footer impasse

Similar Messages

Maybe you are looking for