24 replies [Last post]
brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Site is http://www.webinkcreative.com.au/swt/index.html, relevant CSS file is http://www.webinkcreative.com.au/swt/style.css.

I'm using footerStickAlt (http://www.themaninblue.com/writing/perspective/2005/08/29/) to position the footer (div#bottombox, not div#footer) at the bottom of the page. However, my issue is that when resizing the browser window upwards, the footer simply covers over the content instead of holding it below all the content and increasing the scrollbar size. Same thing happens when text extends past browser height; instead of the footer moving down and sticking to the bottom of the browser window, it stays in the same position. Any ideas on how to fix this? Thanks in advance!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

It's not a problem with your #footer, it's the content in between. You need to do something like this:

div#subnav {
float: left;
	width: 150px;
	padding-left: 45px;
	padding-right: 45px;
}
div#contentmain {
margin-left: 250px;
	padding-right: 15px;
	padding-bottom: 30px;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Thanks, that *almost* works perfectly Smile

The only thing that's niggling me is that still, when reducing the browser height to a certain size, the footer covers up the bottom few lines of #contentmain's text. This happens in both IE and FF. Any ideas mate? Cheers!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

Did you remove the page? I get redirected to your 404 page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Sorry; http://www.webinkcreative.com.au/swt/index.php

CSS file is still the same URL.

Problem I'm having that I believe is linked to the same cause can be seen at http://www.webinkcreative.com.au/swt/concrete.php when viewing in FF - the footer hasn't moved down at all despite the content being longer than default browser height.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

Sorry, forgot to mention to add overflow:hidden to div#contentmain.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Doesn't seem to fix the problem unfortunately Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

Hmmm, I'd 've just copied everything from his example page (which includes all the styles he talks about in his article) - http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm - into a page and it doesn't work, which leads me to believe there's something else in the other stylesheets of that page that are needed for it to work.

Anyway, I got a slight rebuke from Paul O'Brien the other day for recommending that link to someone on SitePoint and was directed to this one instead:

http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3[/code]
I haven't actually had a close look at it though.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

That second tutorial worked great, thanks a lot Smile Glad it wasn't my bad coding in the end haha.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

footerStickAlt issue

Why did you get rebuked then Tyssen?

Pauls method differs only in that the negative margin is transferred from the footer itself to the wrapper and instead of padding to prevent content sliding behind the footer he uses an extra div at the bottom same height as the footer, is it a better version? *shrugs*

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

Hugo wrote:
Why did you get rebuked then Tyssen?

For providing a link to an external article on a topic that was covered in an FAQ thread in their CSS forum, ie "theres no need to send people away from sitepoint when the solution is already here".

I'm a bit curious about the MIB example now though because trying it out exactly as stated in his article, it doesn't appear to work. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footerStickAlt issue

Hmm, and some of his links have gone missing.

The problem with the simple description on his page is the lack of anything to prevent the footer & page content clashing when the page content makes it that far down.

Quote:

<html>
<body>
<div id="nonFooter">
<div id="content">
</div>

</div>
<div id="footer">
</div>
</body>
</html>

You then need to apply a bit of CSS:

html
{
height: 100%;
}

body
{
height: 100%;
}

#nonFooter
{
position: relative;
min-height: 100%;
}

#content {
padding-bottom: 7.5em; /* >= #footer -margin-top */
}

* html #nonFooter
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -7.5em;
}

I guess we should do our own article. In which case, I'd also add some extra "padding: 1px 0"s to prevent the escape of collapsing margins.

#content {
  padding: 1px 0 7.5em 0;
}

#footer {
  padding: 1px 0;
}

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Bleh! Just noticed a new problem. It is only apparent in Internet Explorer, and even then, only at a resolution of over 768 height (ie. 1024*768 works fine, but 1152*864 for example, produces the problem). The problem itself is, the footer stops sticking to the bottom of the page, and instead pulls up a little. Screenshot:

http://brendanwor.customer.netspace.net.au/123.gif

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footerStickAlt issue

You're not doing something right. With the additions, I made it should work fine in IE (demo)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

footerStickAlt issue

At the risk of reducing the s/n ratio, here is my (stolen) version of footer-at-the-bottom-of-the-viewport-or-document-whichever-is-longer.

It works in all Moz/Gecko browsers, in IE/Win and in Opera7. It fails gracefully in Operas 6 and 8 (go figure) and in Safari and IE/mac. Someone might check a newer Safari for me.

By fail gracefully, I mean the footer stays at the bottom of the document. Since that's where a web page footer belongs anyway Wink, that's graceful enough for me. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Well, the problem seems to be that with any page where the content isn't long enough to go down past default browser height, the footer doesn't stick to the bottom; it's simply being pushed there via the height of #clearfooter, or alternatively by using padding-bottom on #contentmain. Thus, if the height or padding-bottom are lower than a certain amount pertaining to screen resolution, #bottombox (the footer) just moves upwards instead of sticking. Knowing this still doesn't solve my problem at all, unfortunately Tongue

Edit - Again, this works fine in FF and Opera, only IE produces the problems, which gives me some faith that it's not necessarily a *problem* with my code Tongue Any ideas anyone?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footerStickAlt issue

Did you look at the link I included in my last post or kk5st's link. Both work fine (although I prefer not to use position:absolute as it doesn't work well in any page with content toggles which alter the height of the page).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

footerStickAlt issue

You seem to be getting very confused with this , I don't really get what you're trying to do with all that div-ing at the bottom of the page, your negative margin is far too large on #page 79px your footer is only ~20px high you need to look again at what you're trying to do with the bottom page elements, personally I would go with either the simpler negative margin on the footer and padding on the inner content or Gary's absolute wrapper example.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Chris..S wrote:
Did you look at the link I included in my last post or kk5st's link. Both work fine (although I prefer not to use position:absolute as it doesn't work well in any page with content toggles which alter the height of the page).

Using your fix produces the same problem apparently.
http://www.webinkcreative.com.au/swt2/index.php
http://www.webinkcreative.com.au/swt2/style.css

Again, it works perfectly in FF and Opera, it's just IE that's not forcing it to stick to the bottom. I'm not sure what I'm doing wrong. Any ideas?

kk5st's link - well, this fix doesn't work in some browsers, which would end up producing the same problem as I have now, only in a different browser.

Hugo wrote:
You seem to be getting very confused with this , I don't really get what you're trying to do with all that div-ing at the bottom of the page, your negative margin is far too large on #page 79px your footer is only ~20px high you need to look again at what you're trying to do with the bottom page elements, personally I would go with either the simpler negative margin on the footer and padding on the inner content or Gary's absolute wrapper example.

Hugo.

Mate, the negative margin is (as far as I know) the right corresponding size. The footer is not anywhere near 20px high; the background image, which must be displayed in full, is 79px high - just above the top of the water droplet, ie. there's white space there that's actually part of the image. Take a look, http://www.webinkcreative.com.au/swt2/images/footerimage.jpg

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

footerStickAlt issue

Laughing out loud I do beg your f******* pardon mate, I'll back off and leave it to Chris to sort out.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Hugo wrote:
Laughing out loud I do beg your f******* pardon mate, I'll back off and leave it to Chris to sort out.

Tongue If you have any ideas feel free to suggest them, I'm quite clearly stumped Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

footerStickAlt issue

brendanwor wrote:
Again, it works perfectly in FF and Opera, it's just IE that's not forcing it to stick to the bottom. I'm not sure what I'm doing wrong. Any ideas?

Under what conditions does it not work? Seems OK in IE to me at 800 x 600 and 1024 x 780.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

footerStickAlt issue

Well ok but against my better judgment Smile try removing the height:auto that is overwriting the #page height 100% this is not in either of the two examples you have been following either have height:100% + min-height;100%
followed with
body>#page {height:auto;}
for FF or do
min-height:100%
followed by
* html body #page{height:100%;}

That may sort things in IE also align:center is not a valid css property.

hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

brendanwor
Offline
Enthusiast
Last seen: 11 years 43 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

footerStickAlt issue

Hugo wrote:
Well ok but against my better judgment Smile try removing the height:auto that is overwriting the #page height 100% this is not in either of the two examples you have been following either have height:100% + min-height;100%
followed with
body>#page {height:auto;}
for FF or do
min-height:100%
followed by
* html body #page{height:100%;}

That may sort things in IE also align:center is not a valid css property.

hugo.

I love you Smile It was height: auto that was throwing it off!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

footerStickAlt issue

Shamefully it was the first thing I was going to mention but forgot when I got confused with what seemed over complication of a simple technique and rambled on about the wrong aspect :roll: I do slap my own wrist for time wasting.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me