Footer problem with fixed layout.

[Linda A]

I have looked over the FAQ entry on how to make sure the footer never displays higher up than at the bottom of the window, regardless of the amount of content, but so far I have been unable to figure out how I could combine this technique with my layout:

http://www.westeros.org/BoD/ (see http://www.westeros.org/BoD/Logs/ for an example of a page with the footer problem)

As this is a fixed layout with framing elements on both sides as well as the top and bottom, setting the HTML element to 100% height doesn't seem to work. And, of course, I don't really want the footer at the very bottom of the page when there is too little content to fill a full page, I want it right above the fixed, graphical footer. Finally, using the negative margin to lift it up enough wouldn't work with a footer that changes in size, would it?

So ... is it possible to accomplish the same effect with some other method that would work with this kind of layout?

[Linda A]

I thought I might add that since javascript is needed for full functionality of the footer anyhow, I wouldn't mind a javascript solution, provided it degrades reasonably well.

Would it perhaps be possible to tweak my existing javascript for the footer to also do a check on whether the page needs a scrollbar or not? If it has one, do nothing as the page is at least one screen tall. It it doesn't have one, place the footer right above the graphical footer with fixed positioning.

This, btw, is the existing javascript:

http://www.westeros.org/ShowHide.js

[Paul O'B]

Hi,

Finally, using the negative margin to lift it up enough wouldn't work with a footer that changes in size, would it?

No it wouldn't as that method relies on the footer being a certain size so you can accomodate it. The other method of placing a footer is to absolutely place it at the bottom of a container. However the same problem arises in that you need to make space and if you don't know the height then it can't really be done. There are some other methods of getting the footer to the bottom (even with an unknown height) but the proble is still that you cannot stop the content above form encroaching on the footer unless you know what height you have to make room for.

I'm not sure that it's worth the effort as you only have a small viewport content area anyway and I would think that nearly all your pages would be longer that the visible area so the footer routine would be redundant anyway as the footer will need to be below the fold.

You already have js in the page causing it to flicker quite badly so I'm not sure you'd be doing yourself any favours by adding more. If you want a js solution then you will need to ask in the js forum or I can move this thread there if you want.

I can't think of any other way to reliably add the footer unless you just place it in the fixed part of the screen at the bottom if its that important to you.

Sorry

[Linda A]

I'm not sure that it's worth the effort as you only have a small viewport content area anyway and I would think that nearly all your pages would be longer that the visible area so the footer routine would be redundant anyway as the footer will need to be below the fold.

Unfortunately, that's not the case. The stand-alone entry pages for my newsblog entries may in many cases only contain a few lines of text, so on anything larger than 800 x 600 they won't push the footer below the fold.

You already have js in the page causing it to flicker quite badly so I'm not sure you'd be doing yourself any favours by adding more. If you want a js solution then you will need to ask in the js forum or I can move this thread there if you want.

Really? I haven't noticed any flickering myself, or had anyone point it out before. I mean, I get one movement once the page has loaded and the ShowHide.js kicks in, and one movement for each click on the footer menu ... but I wouldn't describe that as flickering. Or was that what you meant?

My thought was simply to have javascript change the class on the footer from ... FooterNormal to FooterFixed, for example, if it detects no scrollbar. So it wouldn't have to do any moving of the footer once it has determined the size of the page, unless its resized. I'll make a post in the js forum and ask though. Thanks for confirming that the other method wouldn't work.

[Paul O'B]

Or was that what you meant

No when I resize the page upwards and then resize downwards it flashes very badly and could be uncomfortable for some users. Of course many users probably won't do what I did but its worth knowing about .

The easiest solution would be to use a js to control the footer position as you say. I probably could come up with a convoluted css solution but it wouldn't be very pretty and would probably be quite fragile. The main drawback is that you don't want a fixed height for the footer which makes things awkward.

You seem to have got everything else working quite well though

[Linda A]

Ahh ... you get the flash/flicker in IE? I didn't test resizing as thoroughly there as I didn't have a handy resizing plugin for it like for Mozilla. But isn't that due to the fixed positioning workaround for IE, and not the ShowHide.js?

[Paul O'B]

But isn't that due to the fixed positioning workaround for IE, and not the ShowHide.js?

No, there should be no flicker unless you are using expressions (or js) to work out the positions.

This layout has no flicker at all as it doesn't use any js or expressions with calculatiions.

http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm

Its a common problem with js when used for fixed positioning and min and max widths as its always looking and working something out etc

[Linda A]

Ah, of course ... the IE workaround does use expressions to figure out the positions. I tried out the non-expression methods, including yours, and although I got them to work fine on simpler layouts, I managed to confuse myself rather thoroughly when trying to do one of the more complex, especially when adding menus and such.

I mght have to try to revisit that some day, though, to get rid of that flicker. Once I have recovered from this round of redesigning.

[Paul O'B]

Once I have recovered from this round of redesigning.

lol - they are a bit confusing as you are getting ie to do something its not supposed to They all have little quirks and it does depend on the layout as to how it will work in practice.