0

guys,

I'm building this responsive website where i have footer at the bottom floating.

On my index.page (http://testi3.aada.fi/) my code works fine, but something is wrong with my content page () even i use same code for the floating footer..

can someone give my a hint how to fix this?

my floating code:

.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-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}

/ Mika

Mika
  • 23
  • 1
  • 7

1 Answers1

0

The CSS on your content page is not the same as the CSS on your index page. The CSS for .site-footer on the index page is:

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

Where as on the content page its:

.site-footer {
background-image: url("../images/content_footer_bg.png");
background-position: center top;
background-repeat: no-repeat;
margin-top: 10px;
text-align: center;
}

You're missing width: 100%; position: fixed; bottom: 0;

James King
  • 1,897
  • 11
  • 16
  • Thx for your answer James.Yes, index.html is ok. I have only now trying to make "me.html" code to work. Other files still got that "old" .site-foote class tags.. – Mika Oct 16 '13 at 05:34