Footer image problems

[Robyn]

I am nearly finished with my web design. The last problem I'm facing is trying to get my footer image to be at the bottom of the page. Not the bottom of the browser window, or bottom of the content. Like if the content is longer than a page, then I want it to be below the content.

newwebsite.robertcity.com - My website

matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page - The site I'm basing the footer thing off of.

Nick/Darkmage is unable to help out, so what's wrong?

[Jordan]

Remove the red so it flows.

#footer {
bottom:0;
height:178px; /* Height of the footer */
width:100%;
position:absolute;
background-image: url("./images/bottom-bg.png");

}

You also need to remove the fixed height because it's causing the text to overflow out of the element. Instead, you shouldn't define a height and just let the content flow naturally. However, if you do want it to be a fixed height, then you should set the overflow property to auto.

#table {
background-image: url("./images/middle-bg.png");
width: 1000px;
height: 146px;
margin-left: auto;
margin-right: auto;
background-position:center;

}

[Robyn]

Did so and it still won't "work."

[Jordan]

What is it that you want to change? The footer is now positioned below your content, although I would recommend removing some of that space.

Edit: Be sure to hard refresh after you update external files so your browser reloads them rather than using the cached files on your local hard drive. I had to press CTRL F5 for the changes to take effect on your website.

[Robyn]

I want the footer on the bottom of the browser window or if there's a TON of content on it, then the footer should be at the bottom of THAT.

[Jordan]

Five minutes ago your website looked different so I guess you were working on it, but as I said earlier you must remove the red. Just think about what it's doing. Also, if you don't want the background image to repeat all the way down, add the blue.

#table {
background-image: url("./images/middle-bg.png");
width: 1000px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-position: top center;
background-repeat: no-repeat;

}

The reason the red text is making the footer appear to be in the wrong place (even though it's really in the correct place when the element has a height of 150px) is because when you give the element a fixed height, the browser forces it to be that height, even if the text overflows out of the element which it is in your case so it appears to be taller than 150px since you don't have a border. However, since it's really only 150px, the footer is positioned directly under that element. All of that text is just overflowing out of the element so it looks all wrong.

[Robyn]

I think it's working now. Can you check and see?

[Jordan]

Yep, looks good to me.

[Robyn]

Awesome. Thanks! BTW what do you think about the accuracy of the blog post I posted with the guy explaining how to force the image on the bottom?

[Jordan]

He knows what he is talking about so it's a good informative post. The problem was that you added that fixed height.

By the way, I realized you'll actually want to add the red back in. The real culprit was the fixed height that I explained above, and it's fine to have it absolutely positioned since the parent container element is relatively positioned which I forgot to check for initially.

#footer {
height:178px; /* Height of the footer */
width:100%;
position:absolute;
bottom:0;
background-image: url("http://newwebsite.robertcity.com/images/bottom-bg.png");

}

[Robyn]

It's find now actually. The footer does what I want, so I don't need to add the red back in.

[Jordan]

It should be fine when you have a lot of content like you do now, but if the page is short it may not float to the bottom of the browser window. I would recommend testing it, but glad it's working for you now.

"... The div is absolutely positioned bottom:0; this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser viewport (because of the min-height:100% and the footer sits neatly at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport - the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page."

[Robyn]

newwebsite.robertcity.com/

I just added the red codes and now the content at the bottom is cropped?

[Jordan]

Add the red.

#body {
padding:10px 10px;
padding-bottom:178px;
}

[Robyn]

Excellent. And it works with each browser.

Only thing is, can you view it in IE 7 or 8? Do you notice the header color difference (the difference in color contrast between the logo and the background logo?)