Sticky Footer Problem

[Preeminent]

I see that there was another post on this sort of thing, but there wasn’t a definite answer given. I would like to share my problem and I hope someone can guide me in the right direction.

The sample page I made for this is here: “>http://www.originallyricsformusic.com/sampledemo.htm

I’m trying the sticky footer method from here:Ryan Fait’s site

What’s happening though, is that the footer is being pushed down when the Height:100% is given to my html and body.
Ok, that’s good , but if you look below the footer, there is a gap between the browser and the bottom of the footer. It’s also being pushed down below the viewing area even though there is no content pushing it down. I obviously want the footer to be flush with the bottom of the browser. What is causing that?
For some reason, adding the negative margin to the “container” div and adding the extra “.push” class is not effecting anything. ( I made sure that .push has the same height as the footer.)

I even tried just using absolute positioning to the bottom for the footer, but of course that cause all kinds of problems between different resolutions.

My css for the page is Here:

html, body, div,  applet, object, iframe,

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;

height:100%;

}



#container{

width:960px;

margin:10px auto -100px auto;

text-align:center;

min-height: 100%;

height: auto !important;

height: 100%;

}



#header{

margin:auto;

text-align:center;

width:100%;

height:100px;

border-bottom-style:solid;

border-color:grey;

border-width:3px;

background-color:#9b5a5d;





}



#header img{

float:left;

padding-left:80px;

margin-top:11px;

width:255px;

height:78px;

}



#nav{

float:right;

overflow:hidden;

padding-right:100px;

padding-top:20px;

}



#nav ul{

list-style:none;

}



#nav li{

display:inline;

}



#nav li.join a{

width:97px;

background: url("join.png") top center no-repeat;

}



#nav li.sample a{

width:97px;

background: url("sample.png") top center no-repeat;

}



#nav li.browse a{

width:97px;

background: url("browse.png") top center no-repeat;

}



#nav li.submit a{

width:97px;

background: url("submit.png") top center no-repeat;

}



#nav li.login a{

width:97px;

background: url("login.png") top center no-repeat;

}



#nav li a:hover {

background-position: bottom;

}



#nav li a{

display:block;

height:49px;

text-indent:-9999px;

float:left;

}



#main{

width:960px;

margin:auto;

text-align:center;

}





.push{height:100px;}





#footer{

width:100%;

height:100px;

margin:50px auto 0 auto;

text-align:center;

background: url("footerbackground.png");

background-repeat:repeat-x;

background-color:#898788;

clear:both;

}/code>

Is there something painfully obvious that I'm missing?

[willB]

Hey, I took a look at the site with Google Chrome inspector (Firebug would work if you want to look).
Your problem is that the div “footernav” is taller than the footer.
Changing the height of footernav fixes this problem

[rajdeep123]

There’s a very simple solution.Try this,
#footer{
position:absolute;
bottom:0;
}

[sliver37]

If only, raj, if only… ;)

[Author]

Posts