Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Fix Footer To Bottom Of Page Using Css

Question

Posted · Report post

Hello,

I've seen numerous write-ups about this problem, but can't seem to implement the instructions. I've used Custom CSS to insert a background image in the footer. I can't seem to get rid of the strip of white space beneath the footer image, though.

Would someone please tell me how to deal with the sort of code required to fix this?

I've looked at sites like this http://www.csssticky...ooter-code.html but just can't figure it out on my own.

Thanks in advance,

My website is http://www.esqproductions.com

*EDIT* - I should also note that I don't see the strip of white space beneath the footer image when using Google Chrome, but I do see the strip of white space when using Safari and Firefox.

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

Hi, I´m not sure but

Please you can try with

#footer { position: absolute;}

Share this post


Link to post
Share on other sites

Posted · Report post

Batman,

Thanks for your help. I used that code and the problem seems to be fixed. I swear I already tried that, and it didn't work! I guess the lesson here is...I'm a moron :D

*EDIT* - The problem seems to be fixed when using Google Chrome, Safari, and Firefox. Thanks again!

Share this post


Link to post
Share on other sites

Posted · Report post

There's a line-height of 21px set for the body.

As a result, there's exactly a 21px high break at the bottom of your footer, possibly caused by some hidden space which I don't see.

However, if you edit your code this way, it should resolve in all browsers, correctly:


#footer {

    background-image: url("http://imageshack.us/a/img838/3281/losangelesfromgettypano.jpg");

    height: 275px;

    margin-bottom: -21px;

    width: 100%;

}

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you for your help as well, Rob. I added that code in. Simple stuff like this is pretty difficult for me given that I have zero coding experience, so I really appreciate the quick help.

Share this post


Link to post
Share on other sites

Posted · Report post

Well, it seems to have worked. IE9, FF and Chrome look perfect, without any gaps.

Glad to have helped.

I also appreciate the efforts of Batman, who helps so much in the forums to aid fellow PageLiners.

Have a great weekend!

I'm marking this topic Resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

"I also appreciate the efforts of Batman"

Thanks Rob :)

Share this post


Link to post
Share on other sites

Posted · Report post

Hope you guys have great weekends as well :)

Share this post


Link to post
Share on other sites