How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:

"Steve Pugh" <steve (AT) pugh (DOT) net> schrieb im Newsbeitrag
news:6gl640ddqtjp7vlknkq8ukciokstla3pk3 (AT) 4ax (DOT) com...

Is this close?
http://steve.pugh.net/test/test57-short.html
(see also http://steve.pugh.net/test/test57c-.html for latest version
of the footer code but only using two columns and no background
colours.)

Works in most modern browsers, degrades to having the footer after the
content in other browsers. If I could get it to work rather than
degrade in Mac IE5 I'd be a happy man.

I can't find the second example (get your lost page).

Sorry, should have been http://steve.pugh.net/test/test57c.html

Anyway the first one is astonishing! Definitely close and very creative.

Standing on the shoulders of giants, etc. (i.e. not all my own work.)

Anyway the background-image hack creates strange color differences on both
my PC and my Mac (not in IE6/PC);

Is it just that the background colours don't match the background
images? I get that in all browsers except Win IE6 - must be something
funny in the PNGs.

you could maybe solve this by adding the
background images also to #right and #content.

Or just see if GIFs are handled more consistently.

IE 6 displays a 1 or 2 pixel gap below the footer,

I know about that. I've tried to remove it but it wont budge. Annoying
but ultimately harmless.

and Netscape 7 seems to need a lot of work to render
the page.

The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.

About Mac IE: On sites where I work with a content management (and thus not
have a file per page but only one per template) I sometimes make a server
side UA sniff and send a clean table layout version to Netscape 4, PC IE
below 5 and Mac IE. If the background colors are not continued below the
footer it does not look broken, and this is easy with a table layout.

UA sniffing simply isn't reliable and Mac IE5 has better CSS support
than Win IE5.

That's the problem here - it supports more of CSS than Win IE does but
not as much as Mozilla, so it sees some bits of the code that should
be seen by advanced, i.e. non-IE, (hmm wonder what a screen reader
would have made of that) browsers but not all of those bits.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

"Steve Pugh" <steve (AT) pugh (DOT) net> schrieb im Newsbeitrag
news:dc7940tjfi496obgcrt0n8ie3bhc4vf2u0 (AT) 4ax (DOT) com...

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:
"Steve Pugh" <steve (AT) pugh (DOT) net> schrieb im Newsbeitrag
news:6gl640ddqtjp7vlknkq8ukciokstla3pk3 (AT) 4ax (DOT) com...

[...]

you could maybe solve this by adding the
background images also to #right and #content.

Or just see if GIFs are handled more consistently.

Possible, but I doubt that there is a cross-browser consistent color
rendering at all, as a background color and a GIF or JPG with the same color
definition are displayed differently on systems with 32678 colors while they
fit perfectly on million-color-displays.

[...]

and Netscape 7 seems to need a lot of work to render
the page.

The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.

Even resizing the window takes some time, too, so it does not seem to have
anything to do with loading. What dimensions do they have? I think to
remember that I tried using very small background images (1 x 1 pixel) years
ago as I thaught minimizing loading time, but that resulted in slowing down
Netscape 4 extremely as it needed to repeat the image too many times.

About Mac IE: On sites where I work with a content management (and thus
not
have a file per page but only one per template) I sometimes make a server
side UA sniff and send a clean table layout version to Netscape 4, PC IE
below 5 and Mac IE. If the background colors are not continued below the
footer it does not look broken, and this is easy with a table layout.

UA sniffing simply isn't reliable and Mac IE5 has better CSS support
than Win IE5.

It is reliable enaugh for this task - if somebody makes Opera or whatever
identify itself as Netscape 4 he shall get what he ordered...

That's the problem here - it supports more of CSS than Win IE does but
not as much as Mozilla, so it sees some bits of the code that should
be seen by advanced, i.e. non-IE, (hmm wonder what a screen reader
would have made of that) browsers but not all of those bits.

Mac IE5 seems to have a serious problem with the box model; I don't know
what it is exactly but sometimes it is just really annoying. Well, not as
annoying as Netscape 4, though, but it is still better to deliver a
text-only page than a page that looks broken in any way. (Ok, it's theory, I
don't deliver text-only pages in practice...)

--
Markus

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:

"Steve Pugh" <steve (AT) pugh (DOT) net> schrieb im Newsbeitrag
news:dc7940tjfi496obgcrt0n8ie3bhc4vf2u0 (AT) 4ax (DOT) com...

Or just see if GIFs are handled more consistently.

Possible, but I doubt that there is a cross-browser consistent color
rendering at all, as a background color and a GIF or JPG with the same color
definition are displayed differently on systems with 32678 colors while they
fit perfectly on million-color-displays.

But in this case I'm seeing a colour difference on a 32bit display.
That suggest that either I set the wrong colour in the CSS or the PNG
or that something is awry with the rendering.

And a quick check reveals that the PNGs do indeed have different
colours to the CSS. Mea culpe.

The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.

Even resizing the window takes some time, too, so it does not seem to have
anything to do with loading. What dimensions do they have?

2000 x 20. They need to be wide in order to place the break between
the white and the colour at the correct percentage point for an
extensive range of browser window sizes. To see why either make your
browser window wider than 2000px or use Opera with a small zoom
setting.

I think to
remember that I tried using very small background images (1 x 1 pixel) years
ago as I thaught minimizing loading time, but that resulted in slowing down
Netscape 4 extremely as it needed to repeat the image too many times.

That's true, very small background images can slow browsers down but I
don't think that's the case here.

Part of the problem may be that by using a combination of absolute
positioning and overflow I've replaced the normal scroll of the web
page with one that's in every way identical but isn't. Um, if you see
what I mean.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

CSS is GREAT for styling text but a total failure in respect of liquid
layout.

Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.

Well, great that you are so clever in definitions. So I apologize for
not being precise enough. I meant *horizontally* liquid. Actually, you
could have read this from my posting but now it is also clear for
pedants ;-)

Liquid layout allows the footer to position itself at the end of the
page, no matter how long or tall the page is. This is a Good Thing for
various reasons that require a thread of their own.

I cannot find a single good reason for this behaviour. Do you find the
page counter in a books also depending on the amount of content of the
page? I would say, rather no.

It would be soooo great if instead of chatting funny things about
everything senseless, that someone could *finally* help with the
problem. I assume that I am not the only one who run into trouble with
this footer thing. On the other hand there are so many sites which can
do it. So how, pleeeease?

Peter

That's exactly what I tried. And as you say, no joy in IE. Just try to
scroll the window and you see that CSS has another definition of
"bottom" as the browser. The footer scrolls and overlaps the content.

And isn't that what you wanted? Fixed will make it stay at the bottom of the
viewport, absolute will make it stay at the bottom of the screen (it'll go
away when you scroll).

No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content.

By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)

A good page will not differentiate between any browser except for the
presentation. Content should be structured well enough so it doesn't matter
what browser is rendering it.

I agree. But still no answer on my OP.

CSS is GREAT for styling text but a total failure in respect of liquid
layout.

Many have had great success.

Yes, either they say "NN4 or Mac IE go elsewhere" or they find
themselves experimenting with numerous above mentioned hacks and
tweaks and stylesheet switches.

Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.

Again, I'm a little unclear on what you mean by footer. One which is always
viewable or one which is at the bottom and can be scrolled out of view?

If content is less to fill the browser THEN footer stay in the bottom
of viewport ELSE footer should be at the end of the page (eventually
out of the viewport)

Peter

Actually no. I don't see a status bar, or any other sort of footer.
Though it's true I could put one there if I wanted to.
But your question was about documents within the browser window, so what
is your point?

You definitely know what I mean.

* Look at 90% of industry standard websites. What do you see? A footer
at the bottom of each page

What you are talking about? Show me *one* site that produces a footer at
the bottom of each printed page.

http://www.wired.com/animation/

....plus thousands more. Stephen, tell us, which internet are you
actually using? ;-)

Yes - a footer at the bottom of each *web* page. Precisely. No problems
there.
But you were asking for a footer at the bottom of the *window* - weren't
you?

Of course of every *web* page. Have I not posted to "authoring.html"?

It provides information where users expect it by their browsing
experience accumulated over years. A footer gives the layout its
bottom frame. If you like it or not. It's standard.

So which information that is so important to users is in this footer as
standard, pray?

Please not yet another senseless debate.

If people are working in Word (or any other word-processor I have used)
page footers do not sit at the bottom of the window.

They do.

Utter rubbish. They sit at the bottom of the *page*.
font size=42> The PAGE </font>. Not the window.

I am amazed how hardly someone can misunderstand what I want. I always
thought, everybody would know what a footer is and where it has to be.
I sincerely apologize for not being clear enough.

Anybody out there who knows what a footer is and what I mean? Is it
really THIS difficult?

Peter

"Peter Diedrich" <pdiedrich (AT) gmx (DOT) de> wrote

CSS is GREAT for styling text but a total failure in respect of liquid
layout.

Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.

Well, great that you are so clever in definitions. So I apologize for
not being precise enough. I meant *horizontally* liquid. Actually, you
could have read this from my posting but now it is also clear for
pedants ;-)

Liquid layout allows the footer to position itself at the end of the
page, no matter how long or tall the page is. This is a Good Thing for
various reasons that require a thread of their own.

I cannot find a single good reason for this behaviour. Do you find the
page counter in a books also depending on the amount of content of the
page?

You certainly don't find the footer in the *middle* of a *printed* page, but
that's where it is if your *web* page is taller than the viewport's height
but the "footer" is fixed at the bottom of the screen.

You are confusing printed pages and screens. On the web, pages are not a
fixed height, and the screen is not the page.

I would say, rather no.

It would be soooo great if instead of chatting funny things about
everything senseless, that someone could *finally* help with the
problem. I assume that I am not the only one who run into trouble with
this footer thing. On the other hand there are so many sites which can
do it. So how, pleeeease?

Peter

"Peter Diedrich" <pdiedrich (AT) gmx (DOT) de> wrote

That's exactly what I tried. And as you say, no joy in IE. Just try to
scroll the window and you see that CSS has another definition of
"bottom" as the browser. The footer scrolls and overlaps the content.

And isn't that what you wanted? Fixed will make it stay at the bottom of
the
viewport, absolute will make it stay at the bottom of the screen (it'll
go
away when you scroll).

No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content.


By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)

A good page will not differentiate between any browser except for the
presentation. Content should be structured well enough so it doesn't
matter
what browser is rendering it.

I agree. But still no answer on my OP.


CSS is GREAT for styling text but a total failure in respect of liquid
layout.

Many have had great success.

Yes, either they say "NN4 or Mac IE go elsewhere" or they find
themselves experimenting with numerous above mentioned hacks and
tweaks and stylesheet switches.

Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.

Again, I'm a little unclear on what you mean by footer. One which is
always
viewable or one which is at the bottom and can be scrolled out of view?


If content is less to fill the browser THEN footer stay in the bottom
of viewport ELSE footer should be at the end of the page (eventually
out of the viewport)

It doesn't work like that. EITHER you fix it in the viewport OR you include
it in the flow of the page.

* Look at your empty browser. What do you see? A status bar. This is a
'footer'

If you're using your web site as a platform for distributing an application
that reacts to user input in real time, it may make sense to have a status
bar fixed in the display. If you're just serving ordinary web pages, there's
no "status" to display.

Jeeeeesus, this was just an example.

* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.

In a book or publication or printed report with footers, the footers are at
a fixed location because the page's are physically the same height. With a
web document, pages are of variable height, and you normally display the
footer (links, copyright info, etc.) at the bottom of the text, not at the
bottom of the window.

This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height. At least the browser
window height is normally fixed during a surf session.

O yes, it will not take more then 1 second that someone will reply.
Haha, but you can resize the browser. My reply in advance: Yes, you
can, but visitors will most probably set a comfortable browser size
once and use it for the surfing session.

By invoking
Word you are not explaining why you think that in a browser window, the
footer should appear fixed at the bottom of the window instead of flowing at
the bottom of the document.

Because it looks bad if you have a page with just few content where
the footer with perhaps a dark background crosses the browser window
right in the middle of the browser window.

Peter

Ok since you use both FB and IE, I'll make some demo pages.
http://mikewilcox.curvedspaces.com/demo1.html
http://mikewilcox.curvedspaces.com/demo2.html

Thanks for your effort but sorry, no joy in IE6. Works only in Firefox
here and even then the footer is overlaying the content (however,
this is something where I could live with)

I'd hate to have to listen to a site in a speech browser that was written
poorly.

Again, our site is not intended to listen to. It's about graphics.

Well, there's more people with text browsers other than lynx, but there's
also people who browse with author style sheets off and/or with their own
styles.

OK, but then I could spend years for the perfect layout and they would
dump it anyway. ;-)

I fully agree, but tables work and CSS seems to fail in many aspects.

Apparently you and I have a different version of "work." For me, "work"
means it's rendered without problems on any browser, including old, broken,
or alternative format browsers.

Yes, this would exactly be my definition. A page should work on IE4.
Gotcha :-)

I would be attracted to bet with you a Whopper that more people are
using IE4 vs. a text browser.

IE has notoriously poor support for CSS.

We are 100% in line. THAT is why I do not use CSS. Look at your web
stats. How many people are using IE.

Do not take me wrong. I love the idea of CSS and would not have spent
so much time on it if I would not like the concept. But as long as the
browser are not working as smoothly with CSS as they do with tables,
how can people promote coding in CSS?

Hacks like these make things easier
while we wait for MS to catch up.

Hopefully. I will be first to switch to CSS once the CSS compatible
browser base is established.

an @import switch for NN4?

It's my understanding that NS4 was one of the first (the first?) browsers to
implement CSS 1. This was riddled with inconsistencies, and many developers
(myself included) simply don't style for it. NS4 will only get the plain
(but still entirely useful) page without style from me (that, or one with
few style suggestions).

So you are comfortably doing so well, that you can effort to keep more
NN4 users in front of your door than I do without the speech/text
browser guys with "my" tables?!

IE for Mac has just about as bad of
support as it does on Windows.

And yet another crowd of people you are saying "Sorry, you are not
welcome here".

That's the point.


.....Mmmh, I still have no footers at the bottom. Strange. Am I here in
a political debating forum? ;-)

Peter.