Floating / Sticky footer problem

HTML & CSS
1

Hi, guys!

I’m building this responsive site with skeleton framework. My index page’s footer work ok in every browser but
for some reason my content page’s footer don’t work on FF, but in opera, safari and crome it will ?? And the css code class is the same for all of them ??

.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px;
}

.container:after {
content: “”;
display: block;
}

.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;

}

.site-footer {
background-image: url(“…/images/footer_bg_trans.png”);
background-position: center top;
background-repeat: no-repeat;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}

What i have missed?

// Mika

2

Hi nezperce2000. Welcome to the forums. :slight_smile:

It works for me in Firefox, but this really isn’t a viable way to do a sticky footer. On a shorter screen, the footer sit over the top of the content, which is pretty rotten.

Here is a step by step guide to doing a sticky footer properly: http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1239966#post1239966

3

Hi, nezperce2000

The following CSS3 property is causing the fixed footer to misbehave in Firefox.


* {
    -webkit-backface-visibility: hidden;
    [color=red]-moz-backface-visibility:    hidden;[/color]
    -ms-backface-visibility:     hidden;
}

If the -moz- property is deleted or commented out, the footer seems to work as intended in FF.

It is my understanding that this property is used in conjunction with rotation. Is it really necessary here? If so, perhaps it could be better targeted. I’ve seen the universal selector cause problems because it targets too many objects. This might be one of those cases.

4

Hi Mika,

What i have missed?

I didn’t look to what the differences are, but if I replace the me_layout.css by layout.css, the second page has the footer in the right place.