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.

Similar Messages

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.

Gap below footer...

I cannot, for the life of me, determine why I have a gap below the footer of my pages on this site. The URL is...
http://excelhr.businesscatalyst.com/index.html
My settings are as follows...
and index...
I realize the page heights are different in these shots, but that was a test I did right before I submitted this quesiton. It makes no difference. The footer is dragged to the bottom of the page, and is aligned to the red guide designating bottom of browser.
Any help would be much appreciated...
Thanks in advance.

Tried with both 'sticky footer' selected and deselected. The site is not fixed height, so without it selected one of the pages had the footer in the middle of the page. The selection made no difference on pages that did match the overall site's designated height. It still had the 10 to 20 pixel gap at the bottom.
Coincidentally, I am working with two sites right now that were doing the same thing, and the fix for both was to trun off all effects and groupings, and pull the box about 30 pixels below the 'bottom of page'. And all of my testing was being done on the master page itself, and still getting the gap, so page settings vs site settings would not have played into it.
I saw that post that discussed the sticky footer too, and tried it then.

CSS design, gap below images in IE

I'm really getting into ditching tables for CSS / divs, but
am coming up against all the browser bugs you're warned about. Some
I can fix but one that has me puzzled is where my masthead image,
within a div, looks fine in Firefox but has a couple of pixels gap
below it and the next div element below it (which will be used for
navigation). I can't show you a link as it's not live, just very
much at development stage.

Rename the page, upload it and post the link.
"Cactus Woman" <[email protected]> wrote in
message
news:eu5ha4$fi$[email protected]..
> I'm really getting into ditching tables for CSS / divs,
but am coming up
> against all the browser bugs you're warned about. Some I
can fix but one
> that
> has me puzzled is where my masthead image, within a div,
looks fine in
> Firefox
> but has a couple of pixels gap below it and the next div
element below it
> (which will be used for navigation). I can't show you a
link as it's not
> live,
> just very much at development stage.
>

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

CSS gap below header

I have a header on a template that is showing a gap between it and the divs in the content below it. I have borders in different colors and you can see it at mojogar.com. The header has a blue line that represents a bottom border line in its CSS.
.thrColHybHdr #header {
background-color: #C9F76F;
margin: 0px;
padding: 0;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #30F;
Right below that is a black line that is the border top of the container div for the middle section. They line up fine.
.thrColHybHdr #mainContent {
margin-top: 0;
margin-right: 13em;
margin-bottom: 0;
margin-left: 13em;
padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;
text-align: center;
position: relative;
border-top-width: thick;
border-top-style: solid;
border-top-color: #000;
But, my div inside that "mainContent" div leaves a gap (as do the side ones which I am not posting the CSS but you can see the gaps on the sides at the site). Here is the CSS for that div inside the middle section with the yellow top border.
.defFullTop {
position: relative;
width: 100%;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #ff4900;
border-top-width: thick;
border-top-style: solid;
border-top-color: #FF0;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C03;
border-left-color: #C00;
Thanks!

Page looks roughly the same to me in IE7 and IE8 - a slight gap below the header.
A much bigger problem occurs if you resize browser viewport below 1280px. Everything shifts.
Overall this layout isn't working.
Related links:
Google labs - Browser Size
http://browsersize.googlelabs.com/
Open Source CSS Frameworks and Multi-Column Layouts
http://EZ-CSS.org
http://960.gs/
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/grids/index.html
http://developer.yahoo.com/yui/grids/builder/
http://layouts.ironmyers.com/
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

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

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.

Published site has huge gap between content and footer

So i have just published my site and when i look at it after being published i have a good 2 inch gap between the bottom of the content and the footer.
I have read up on a number of bits and pieces and they say you mauy have a hidden container on the pages, which i totally accepted so i searched and nothing. I then thought it might be a issue with the master page i was using, so checked that. Couldnt see it.
However when i looked through my site and saw the master pages i used i had a mix and some worked and some didnt. Im lost!!!
I launch on Sat and its a bit of a pain. Has anyone had this issue? The preivew looks fine, so im not sure where this gap is coming from.
Thanks in advance!

When Sticky Footer is checked, the footer will stick to the bottom of the browser window unless the page is taller than the browser window.
Glad that I could be of help.
Regards,
Sachin

CSS sticky position

I'm trying to create a navigation bar that is initially down the page and as the user scrolls the navigation bar remains pinned to the top of the browser. An example are shown here, in a CSS demo http://demo.hongkiat.com/css-sticky-position/index2.html and then here is a complete website that uses this: http://albanyrisk.com/
On the second example (albanyrisk.com) the navigation bar initially seems pinned to the footer, and then moves to the header when scrolling – ideally, this is the effect I'm trying to achieve.
Any help greatly appreciated!
Thanks
Steve

Hi,
Try this tutorial: http://www.youtube.com/watch?v=c-SD489AGa8
Abhishek

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.

CSS Making footer stick to bottom

How do I make the footer stick to the bottom?
http://www.curiousmedia.com.au/test/default.php
thanks
Here is the css
margin: 0;
html, body {height: 100%; padding:0; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:11px; line-height:18px;}
h1 {font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#1d518b;}
#superwrapper{
background-image:url(images/top_bg.gif);
background-repeat: repeat-x;
#wrapper {width:765px; min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -125px; /* the bottom margin is the negative value of the footer's height */}
#header{padding-top:25px; }
#logo {float:left;}
#social_media {float:right; padding-top:30px; }
#social_media img{padding-left:8px;}
#content{padding:25px 0 0 35px;}
#col-1{width:452px; float:left;}
#col-2{float:right; width:213px;}
.clr{clear:both;}
#footer-content{width:765px; padding:75px 0 35px 0; margin: 0 auto}
.push{height:1px /* .push must be the same height as .footer */}
.footer{
height: 126px; /* .push must be the same height as .footer */
background-image: url(images/footer_bg.jpg);
background-repeat:y;

Hi,
thanks to Nancy O. you should look here:
www.alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Hans-G.

Excessive light leakage from gap below some keys on MBP

Hi all, I got a top of the line 15" MBP a little while ago and recently noticed excessive light leakage from the little gap below some of the keys. It's really only noticable below the W and E keys when sitting or viewing from a certain angle. It can be quite annoying at times. I spoke to a couple of Apple support reps who said that it's common to some extent on most MBP's. I also took it in to my local Apple store, and they said it's "within spec". I was kind of hoping for a better answer after spending almost $2500 on the thing, but whatever. I came across several posts on various Apple forums with people posting about similar issues going back as far as 4-5 years, so obviously Apple hasn't done a great job addressing the issue.
I also noticed a little pinhole size blue light below my J key, which someone pointed out was probably just a logic board light. Are these things common on MBP's? I figure I can get a more honest opinion on here than from Apple support or "geniuses". Any help would be great, thanks!

Hi d,
The "light leakage" is not unusual - it's been on every MBP I've seen (if you look at it from the "right" angle). I'm sure there are better and worse keyboards due to manufacturing.

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

Apparent gap below CSS sticky footer in IE?

Similar Messages

Maybe you are looking for