A List Apart: Comments on: Exploring Footers

Posted by: Jeremy Flint

2012-01-31T13:00:49+00:00

Nice trick. I cannot see it as useful to have a footer at the bottom of the browser window. If a page is short on content, and someone has their browser taller than the content height, then the footer seperates from the content. Seems to me a lot of trouble for very little benefit. I can see it as useful for the dead center placement, although again, there seems to be a lot of scripting involved unlike the other method mentioned, which is 100% CSS.

Posted by: jim

2012-01-31T13:00:49+00:00

"Picture you want to center a..." wtf? nice article otherwise.

Posted by: Brian

2012-01-31T13:00:49+00:00

Or from the abstract: "With CSS layout, it's piece of something else."

Posted by: Stuart

2012-01-31T13:00:49+00:00

If you've ever had a client ask "why is the footer in the middle of the page instead of at the bottom?" this will be helpful. The non Javascript version works nicely when printing in IE6 as well. This is something else clients often get particular about.

Posted by: Martin Brown

2012-01-31T13:00:49+00:00

I know it is in the examples, but the article does not mention that you need to give the body style a padding and margin of 0. If you don't the footer will appear just off the bottom of the browser. e.g.

Posted by: Brian R. James

2012-01-31T13:00:49+00:00

You anti-table zealots crack me up. Don't get me wrong, the article was in depth and fascinating. But a whole lot of energy is being thrown at solving a problem that doesn't need solving. A simple table element with a few attributes performs this task nicely.

Posted by: apartness

2012-01-31T13:00:49+00:00

Thanks for catching the typo. Fixed! Appreciate it.

Posted by: John P. Yuda

2012-01-31T13:00:49+00:00

A table is going to linearize in only one way. By using absolute positioning, I can move code around in pages so that screen readers/text browsers aren't confronted with a barrage of navigation at the beginning of every page. It's not the only reason to use positioning over tables, but it's certainly a good one.

Posted by: apartness

2012-01-31T13:00:49+00:00

Brian said: �You anti-table zealots crack me up. Don't get me wrong, the article was in depth and fascinating. But a whole lot of energy is being thrown at solving a problem that doesn't need solving. A simple table element with a few attributes performs this task nicely.� There may be cases, even today, where you need tables for layout. The article is not based in zealotry; it does not advocate modern methods over old-school ones. It could even be viewed as an implicit critique of CSS for leaving out certain basics designers need, such as the ability to reliably position layout elements with respect to the viewport. So if it�s not for zealots, who is this article for? It�s for designers and developers who�ve made the decision that the site they�re creating would benefit from semantic markup and CSS layout, but who find that CSS resists an aspect of their layout. The article offers a solution that problem.

Posted by: dave rau

2012-01-31T13:00:49+00:00

There's too much trickery involved in many of the new CSS techniques. It's not that I don't appreciate the efforts of these designers, but the workarounds are getting old. Every time I start to feel like I've got some kind of mastery of the concepts of CSS (like float!) browsers hit me in the face with a baseball bat.

Posted by: gc

2012-01-31T13:00:49+00:00

This article is pretty cool at addressing a cosmetic need on our web site. It works mostly but I had to add two extra div nestings. I'm really loosing interest in CSS. I try to keep my structural code as simple as possilbe but then I have to keep adding more layers of complexity to what should be a simple stack of blocks. Cuz you gotta wrap the blocks in containers and then the containers have to be in containers and then most likely those containers need to be in meta containers, usually with only one or two properties per a div. Seems like a waste and not much of an improvement. Maybe someone could write about the theory behind div nesting. At this point its getting silly.

Posted by: Fabian

2012-01-31T13:00:49+00:00

Over here it doesn't work properly in Opera. In the last examples I have to scroll to see the footer. Is that normal?

Posted by: Anne

2012-01-31T13:00:49+00:00

http://steve.pugh.net/test/test57.html

Posted by: James Atkinson

2012-01-31T13:00:49+00:00

that example doesn't work in IE mac or safari. the footer stays in the middle of the screen with short content.

Posted by: 4.01

2012-01-31T13:00:49+00:00

Brian said: "You anti-table zealots crack me up... ...A simple table element with a few attributes performs this task nicely." If you're refering to height="100%", that doesn't work in a modern browser. It maybe be dependant on doctype, but still. Even in 4.01 trans, it does not work. Now what?

Posted by: The Bead Man

2012-01-31T13:00:49+00:00

It does seem that many of the workarounds would be unnecessary if inline-blocks were standard (especially as they work for 95% of users - i.e. IE). The semantics are simple - fill the box like a block box; position it like a replaced element (e.g. IMG). Ironically, using OBJECT with type text/html *data* works!

Posted by: David Graham

2012-01-31T13:00:49+00:00

I did this about a year ago and can't remember the exact approach, but I think I just made a footer div with fixed position at 35px in height and set the margin-top to -35px. Of course you'll need to pad the bottom of the content area so the footer doesn't overlap, but that's trivial. I didn't ever deploy it and so only tested it in a few browsers but it did appear to function just fine. Any thoughts?

Posted by: Anne

2012-01-31T13:00:49+00:00

Which version of Safari?

Posted by: Tom Dell'Aringa

2012-01-31T13:00:49+00:00

I agree with some other comments that a lot of these newer techniques are going to far around the pylon. I love JavaScript, I love modern methods. But this is a lot of code to add to my already growing (and groaning) stylesheets. And I like playing with the DOM, but I don't want to have to mess with the JS code to set a footer, it goes against what I think JS is for. And I'm a JS nut. I'm redoing a site right now where we could use this, but I won't. I'll let the footer float up when it has to, and I don't really see any problem with that at all - it's certainly not worth adding all the code for. Even so, nicely written and good job figuring it out. Tom

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

Thank you all for sharing your opinions and discussing this article. Unfortunately I'm on a short ski trip in Cervina (Italy) this weekend, right now I'm sitting behind a computer in an internet cafe to follow the discussion. So it might be I have to come back on some issues mentioned in the beginning of next week. Fabian: I tested the examples in Opera 7.1 on WINXP and WIN2000. Could you please post in which Opera version on which OS you encountered the problem? Anne: I quickly ran through the code of http://steve.pugh.net/test/test57.html and saw it uses the min-height attribute. In fact it resembles the CSS method described in this article, with the main difference it uses absolute positioning in an absolute box, instead of absolute positioning in a relative box. I agree that CSS can give some headaches especially if you are a novice CSS designer. Still I don't think the CSS method is that hard to implement if you have a little bit more experience with CSS. I see the JavaScript/DOM method as a good temporary solution. It looks complicated, but you can just copy it over an reuse it any time you like.

Posted by: Jim

2012-01-31T13:00:49+00:00

Scripts for layout? I identify with the need to solve these problems, but scripts! Too hard to maintain.

Posted by: Chris Jennings

2012-01-31T13:00:49+00:00

This is a nice article. I believe that the height attribute was deprecated way before XHTML and in my world the table height="100%" is being used by my university to deliver this: http://www.brookes.ac.uk -- It was the brand you see. It had to be delivered like that. I hated that it was done like that, and my web responsibilty is for my school / faculty, so I did this: http://ah.brookes.ac.uk My solution is too complicated for this discussion and the CSS hacking for different browser support deserves its own article. One useful additional trick is to use the 'Conditional Comments' supported by IE to deliver specific 'divs' to particular versions of that browser.

Posted by: Jeremiah McElroy

2012-01-31T13:00:49+00:00

I noticed an interesting quirk in examples 4 and 5 with Mozilla 1.4.1 on Fedora Core 1. After resizing the browser window to full size, everything looks fine. However, when I resize it to normal size again, there is a horizontal scrollbar sized gap between the bottom of the footer and the bottom of the viewable area in the browser.

Posted by: Vinnie Garcia

2012-01-31T13:00:49+00:00

I fail to see the need for the box model hack in your previous example. Since every browser that understands min-height understands the parent>child rule, just min-height there, like so: html, body { height: 100%; } #container { height: 100%; } html>body #container { height: auto; min-height: 100%; } It's much easier to comprehend without the hack in there.

Posted by: Dave

2012-01-31T13:00:49+00:00

When viewing any of the examples in Firebird for windows the footer doesnt not cover the entire width of the page...is this intentional? I noticed the element at the top does cover the entire width of the page.

Posted by: greut

2012-01-31T13:00:49+00:00

Just put a : padding-left:1px; at the Content because if the width a too small the content disappear (same for "The Daily Report") in Mozilla.

Posted by: Terry

2012-01-31T13:00:49+00:00

http://www.pmob.co.uk/temp/3colfixedtest_4.htm No javascript and cross-browser compliant.

Posted by: Phillip

2012-01-31T13:00:49+00:00

Is there any browser this might fail in? var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Posted by: Big John

2012-01-31T13:00:49+00:00

Please don't lump good browsers in with Explorer. That bowser (oops) is far and away the reason that people resist css positioning. Opera and Gecko are superb css browsers and a joy to write for, but the fat man at the table has to ruin it for everybody. Yesterday I discovered an IE bug that causes left padding in one box to create negative left padding in another box, sucking the text to oblivion! This is not the behavior to inspire confidence, and there is no sign that IE will be redesigned so let's resign ourselves to many more years of headaches. Thanks, Bill...

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00

http://www.pmob.co.uk/temp/3colfixedtest_4.htm The example fails in Safari 1.0: the footer is not positioned at the bottom of the browser screen, but at the end of the content. The point of this article is to position the footer at the bottom in case the content is not long enough to push it to the bottom of the screen. IE specific CSS: a future article about this phenomenon would be appreciated. I don't understand how it works and what the possible drawbacks on other browsers are, since I'm a Mac person and never work with IE6 (except for testing on an old win98 machine). A pointer to a good article would also be fine.

Posted by: atmosfilter

2012-01-31T13:00:49+00:00

While many others are questioning the usefulness of this code, I think it offers quite a few different solutions to a problem I've been looking at for quite some time now: vertical centering. I know you suggested this at the very bottom of your article, but I thought I would mention it again for those who didn't exactly find your article beneficial. Thanks for this, Bobby.

Posted by: Sven Neuhaus

2012-01-31T13:00:49+00:00

Minor nitpick: JavaScript has "else if", no need to use "else { if" all the time.

Posted by: zachary

2012-01-31T13:00:49+00:00

I thought the real jewel in this script was the vertical centering example... combine with css and you can postion just about anything V and H dynamically. Don't get hung up on the footer thing, the title should be 'Vertical Positioning with DOM/CSS" because that is what this really is. Also, to change the height of your content div relative to window size, add a variable to your setContent function. Change the Math a little to tweak it where you like it. It is set close to 16:9 widescreen now. Of course if content is longer it will stretch, but this always helps w/ my layouts. Good article... You almost have me putting js in my sites again (almost!) function setContent() { if (document.getElementById) { var windowHeight = getWindowHeight(); if (windowHeight > 0) { var contentElement = document.getElementById('content'); var contentHeight = contentElement.offsetHeight; if (windowHeight - contentHeight > 0) { contentElement.style.position = 'relative'; var newHeight = (windowHeight / 16 * 12); contentElement.style.height = (windowHeight / 16 * 12) + 'px'; contentElement.style.top = ((windowHeight / 2) - (newHeight / 2)) + 'px'; } else { contentElement.style.position = 'static'; } } } }

Posted by: J. Hoffman

2012-01-31T13:00:49+00:00

This doesn't seem very different from Dug Falby's http://www.alistapart.com/articles/flexiblelayouts/ , the javascript is just more developed.

Posted by: Alberto

2012-01-31T13:00:49+00:00

sorry for minor grammatical errors. There is invariably a problem with css - a problem that doesn't involve the programmers or webmasters who take the (valuable) pain to work on css and provide solutions: and the problem is that the solutions always involve a considerable amount of problems and are rarely definitive. The mere fact we must sponsor something like a "hack model" (the name tells it all) for css rules is in itself not only a nightmare, but I am also dubious we should let such things sneak into our codes wilfully. A mistake in a code is normal, but convoluted solutions sponsored and encouraged is another thing. You script following the W3C standards and you find that a rule works on IE6 but not on IE5 yet wait on IE5 for Win ok but for mac not yet and oh well NS4 don't even mention it, NS5 ok but not always, safari I hope you work for a big firm where you can afford the _luxury_ of testing your pages on 3 different operative systems, then Firebird (or was it Phoenix...?) which doesn't scroll, then Opera, yes but from 7.2 onward because before 7 it didn't work, so well this rule, put a hack here and then doesn't work put a hack there and then works here but wait let me boot my friend's mac and bring the diskette, wait it doesn't work there, ok this hack but now doesn't work where it previously worked, they released a new version of Opera let's hurry, wait have you tried that new browser, add this line, remove that, wait a minute... Are we being payed for doing this? A few would answer we are. All of this in the face of what is not only called "standards" but even "recommended". On what basis we recommend? On what basis we deprecate? The W3C deprecates: but why? Is that truly a necessary part of its work? It seems now it has deprectaed name attributes: have server side languages taken into account while we deprecate the name attributes? In what world do we live when we script? Now we discover tables are not "encouraged" - yet solutions that don't work are. I can be wrong, but if one wants to obey to deprecations and standards and recommendations, you have to make choices: either you accept only a limited amount(though majority of users) of browsers, or you make up your mind to make impossible css rules crammed with hacks that wouldn't eventually work in the expected way on some platform/browser combination anyway. Deprecate, deprecate all the while... what do we get in change? I would say that deprecations are untimely - to say the least. We work with real browsers, not with Star Trek. Long time ago we were struggling with NS4 and the notorious "browser sniffing". We hoped things had moved on, we now discover that we're back to those times, with a different name. W3C should reccomend and deprecate less. And we ought to make choices because, realistically, in this mess we JUST can't make everybody happy! And this should be acknowledged and said frankly & openly. It is not a matter of being a bad webmaster: it is a matter that tables are useful, and deprectaing them today to leave us with box hacks means living on a different level than the one we poor webmasters fight every day.

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

My apologies for creating a backlog, as I mentioned before I was on a short holiday last weekend. Hereby my answers on the open questions and points raised in this discussion: Martin Brown: http://www.alistapart.com/discuss/footers/1/#c6534 Thanks for noting. Of course for the implementation of any CSS layout you need to control the (default) margins and padding in your design. But you are correct, if you want to avoid a vertical scrollbar you should at least use: body { margin: 0px; } Fabian: http://www.alistapart.com/discuss/footers/2/#c6542 I tested all examples in Opera 7.02/WIN2K, 7.23/WIN2K, 7.02/WINXP and 7.10/WINXP, but couldn't find any scrolling issues. However I found a small Opera bug for examples 2 and 3. Somehow it renders some space underneat the footer when a page is initially loaded, on refresh everything works fine again. I have to disappoint the people that thought they had found a CSS solution that works for all browsers: Anne: http://www.alistapart.com/discuss/footers/2/#c6544 Terry: http://www.alistapart.com/discuss/footers/3/#c6570 As other people already have noted these examples don't work correctly in Safari and IE5/Mac. This is caused by the lack of support for the min-height attribute as described in the article. David Graham: http://www.alistapart.com/discuss/footers/2/#c6550 The article discusses what happens if there is not enough content and footer to fill your page and you want the footer to stick to the bottom of it. In your description the footer always stays at the bottom of the content area. You still need to use min-height to achieve the desired effect. Vinnie Garcia: http://www.alistapart.com/discuss/footers/3/#c6564 I expect that in this case child selectors will produce the same effect as the box model hack. There are more ways that lead to Rome, I guess it is all a matter of taste. However I still prefer the box model hack over using child selectors. First it is more transparent. If I read a style sheet and find the box model hack, I know why it is there for and so will my collegues. If in some stage I would want to remove IE5 specific code (let's hope it will get redundant one day), I can easily remove it. If you look at the min-height and overflow attributes, I expect that the next version of IE will either act the same as IE6 or will be fully standards compliant. In the case you use child selectors, there is a small risk that the technique will break if IE7 has a standards compliant min-height and overflow implementation, but still has no sense of child selectors. I don't expect that this will happen, but then again, you never know. Phillip: http://www.alistapart.com/discuss/footers/3/#c6571 Good suggestion. I guess you propose something like: function getWindowHeight() { var windowHeight = 0; if (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) { windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } return windowHeight; } Works in all browsers I tested in and is a little bit less verbose, so I think this can be regarded as a small improvement of the technique. Anybody with a different opinion? Dave: http://www.alistapart.com/discuss/footers/3/#c6565 The footer doesn't not cover the entire width of the page. This is done on purpose, so you can see that the footer overlaps the bottom padding of the content box correctly in example 1-3, and that they don't overlap for examples 4-6, where the footer is placed directly under the content area. Sven Neuhaus: http://www.alistapart.com/discuss/footers/4/#c6583 You're right, another small point of improvement making code more legible: function getWindowHeight() { var windowHeight = 0; if (typeof(window.innerHeight) == 'number') { windowHeight = window.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else if (document.body && document.body.clientHeight) { windowHeight = document.body.clientHeight; } return windowHeight; }

Posted by: Voodoo Joe

2012-01-31T13:00:49+00:00

...when possible. I, like many who prbably visit here, work professionally at this. The usual markup, css, java, php, xml, whatever. And yes, having to support a dozen or so broken and buggy browsers is part of the joy(sarcasm, of course!), esp. when some paying client uses a particularly bad browser. But, for my own pursuits, I can do as I please. My favorite tactic, upon detecting an inferior browser is to politely inform the visitor, "Did you know your browser sucks? This is why the pages you are viewing may appear broken. Follow along, and I'll show you a Brave New World beyond the gray, lifeless one you've been wandering in." Arrogant? Perhaps so, but most people don't know better and never will if they aren't told so. Would you let a friend walk around with the zipper of his trousers open? Unless you were a cruel joker, of course not. Therefore, I take it as my noble duty to let people see the light. The potential of what the web is, and more importantly, could be if we did not blindly accept the third-rate crap foisted upon us by corporate interests who only care for market share, or developers who just write poor code.

Posted by: goetsu

2012-01-31T13:00:49+00:00

personnaly i have bug in ie mac when i change the size of the page and don't reload it. Maybe a reload script on change window size is necessary to prevent it

Posted by: irvin

2012-01-31T13:00:49+00:00

It seems many have been deleted. Is that so?

Posted by: apartness

2012-01-31T13:00:49+00:00

irvin asked: >>It seems many have been deleted. Is that so? Nope. No on-topic post has been deleted, aside from a duplicate message that was accidentally posted twice. We figured we figured once once was enough was enough.

Posted by: George Calderon

2012-01-31T13:00:49+00:00

Just want to say that it's a nice article. I just found this site and I'm finding a lot of neat articles to look at. Thanks

Posted by: Francesco Sanfilippo

2012-01-31T13:00:49+00:00

I think it is sometimes a valid design decision to fix the footer to the bottom of the viewport. I remember a few instances when I really wanted that particular look. I usually solved "the fixed footer" problem with frames, to tell you the truth. Since converting to XHTML and CSS design, I prefer to work in pure CSS - hack-free, absolute positioning free, and Javascript-free, so I personally would not use the author's solution.

Posted by: setmajer

2012-01-31T13:00:49+00:00

Quoth Apartness: It could even be viewed as an implicit critique of CSS for leaving out certain basics designers need, such as the ability to reliably position layout elements with respect to the viewport. The recommendaton *does* include a way to reliably position layout elements WRT the viewport: position: fixed. IE/Win just doesn't grok it (and IE/Mac has problems as well). This from the company that patented stylesheets....

Posted by: Joe McBride

2012-01-31T13:00:49+00:00

After spending more time trying to get my layouts to display just right than on actual design and editing for one too many projects, I have decided to leave these techniques up to my personal site. I've gone back to tables out of convenience. What used to take me all day to get a layout functioning with CSS (plus various days after, seeing the sites in various browsers) in the mainstream browsers, I now spend maybe 2 hours from .PSD to .HTML. All the practice though has sure fine tuned my skills to due some fairly advanced work through "hybrid" designs. My boss is much happier too, as our audience does not see the code, they want the pretty pictures.

Posted by: Sean

2012-01-31T13:00:49+00:00

My two cents. Code the header and the footer in css. Code the body in a table. For me, it has been the best balance I have been able to achieve. Using this method, I can still have layers in the header and footer overlap the content area thanks to the magic of css. But now, the content section moves the way I want it to move every time, without worries or hacks.

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

Talking about fixed positioning: http://www.alistapart.com/discuss/footers/5/#c6621 Recently I had to find a solution for a design where the client used a frame layout and I had to integrate and style an application that didn't use frames. The design included a footer (containing branding and main navigation) that always stays visible at the bottom of the screen. Should be a piece of cake for CSS fixed positioning, but like mentioned before this is not supported by Internet Explorer. Luckily the CSS/DOM/JavaScript technique as described in the article came to the rescue. By adjusting the setFooter() function and adding a few lines of CSS code I was able to create a layout that looks like it is built using frames: http://www.bobbyvandersluis.com/articles/ala_footer_variation2.html

Posted by: Steve Bailey

2012-01-31T13:00:49+00:00

Can someone point me to a forum that matches the intelligence found on this site that will help me figure out my CSS problems. http://www.stevebaileydesign.com/feb04/web/gravity.html what it's supposed to look like: http://www.stevebaileydesign.com/feb04/web/versailles.html I've tried everything but can't get it to work. Read zeldman's book. dissected Apple's FCE page for reference. reading meyer's books.

Posted by: Sir Max

2012-01-31T13:00:49+00:00

Don`t see any benefit from this script cause it`ll give me no advantage. May be better to0 write a table in 1 minute and to be sure that ot eorks fine???Isnn`t it? If it`s short,cross-platforminh and simle, why not to use the table....only because not to an old chool??

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

Typical to any ALA article, about a third of the posts, if not more, boil down to "I could do better" elitisms of various flavors. Why bother? If you can do better, then just do better. Or write your own ALA article and submit it. I try to view the entire web design community as just that, a community. We earn our livelihoods (or at least a part of them) by doing things very few others understand; least of all, the people who visit our sites or the people who may or may not bother to pay us for our work. Especially for those of us who work in smaller companies where we really are the only "web guy", feelings of isolation can really set in. I think it's great that there are places I can go online where I can read articles about and discuss topics which I am passionate about; where I can find people who understand the esoterica of what it is we do and won't just stare at me blankly if I start talking about CSS, div tags, JavaScript, or even just plain ol' HTML. It really depresses me that people are willing to share the various ways they approach common or sometimes not so common problems and the solutions they have found that work for them. A lot of work goes into these articles and even into some of the discussion posts; and all too often I see them dismissed with nippy little snide comments. At the very least, have the professional courtesy to say "thanks for sharing" before you present your solution. And also keep in mind that it is just your solution, and the fact that it's yours doesn't make it automatically better. So drop the elitist attitudes. That being said, this is one of the very few areas where still using tables for layout doesn't bother me. CSS, or at least [em]widely supported[/em] CSS doesn't allow for an quick and easy way to do this. So divide the page up into 2 table cells, put the footer into the bottom cell and everything else into the top cell. This still technically allows for the fluid redesigns offered by CSS because it's a footer, it'll always be at the bottom. Everything else in the top table cell is just as free to be manipulated and styled via CSS as ever. This is in no way meant to invalidate the solutions presented in the article. ;) As for the W3C and their recommendations...there is a need for web standards. Once they are properly supported, the world will be a much happier and better place for web designers. IE is the only browser that's playing catch up at this point, and the good news is, they are playing catch up. That does mean that the vast majority of web surfers are using non-standards compliant software. As designers, we each make the choice to follow the standards that will truly become standard over the next 5-7 years today, or let our actions be dictated by the masses and the software monopoly. By the weighted way in which I worded that, you can pretty easily guess how I choose. But it's a choice and it's your power to make that choice. Make it, debate it, but don't be an ass about it. As for tiring of all the hacks, amen! But, if you find yourself having to do hack after hack after hack, you may need to take a step back and examine your design practices. I usually find a simpler way if I take some time and think it over when I find the code getting overwhelming...not always, but usually. =) This went way longer than I meant for it to. I'll shut up now. Thanks for reading if you managed to make it this far.

Posted by: sanchez

2012-01-31T13:00:49+00:00

Amen, brother.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Every time I try to walk away, something makes me turn around and say... That there are reasons we post this. APA and I are not "haters". We are speaking our mind. It's like I said, about ALA being the idiot magnet. If I speak my mind about something, and it disagrees with everyone else here at ALA, my comments get deleted by Hitler , er Apartness and I start this rampage about free speech. Not because I'm a hell-raiser (well not entirely), but because it's my right. And yeah, I could do better. And I have. Twice. I published a JS version of the hideous Accesskeys article at the now discontinued jstimes.vze.com. And I am almost finished with a DHTML menu (http://geocities.com/dc_sfhe/redesign.html) that makes the hacky excuse for a "Suckerfish" menu (boy did it suck) look like crap. No offense, but let me give advice: don't base DHTML menus on CSS hacks. So this is the end of the "flames", even though it's considered flaming to disagree with "the man".

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

And I'm not saying it's uncool to disagree. The web would be a pretty boring place if we all agreed on design and coding principles. I would personally try to avoid emotionally charged words like "idiot" and "suck", but then again, I did refer to Microsoft earlier as a software monopoly, which is up for debate, so I'm just as guilty as you in that regaurd. All I'm really saying is, when you disagree, have the courtesy, professionalism, and common respect for you fellow human beings to not be an asshole. Unfortunately that sort of common sense behaviour is UNcommon enough to cause me to avoid reading the comments section of most ALA articles, and behaviour better suited for middle school playgronds is common enough to remind me why I usually don't bother on the rare occasion that I do.

Posted by: Christopher Mahan

2012-01-31T13:00:49+00:00

All I have to say is that if you want paper, go PDF, otherwise, lose the footer. It's a concept that came along with paper. The article explains its solutions nicely. As far as the poster about tables: when templating the site using php, it's nice not to have to worry which table you're in when calling each function.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

That I hear "Middle School Playground Talk" every day. That's because I'm 14 (which makes me the youngest web developer). So I have an excuse. That's why I use suck so much. There's nothing wrong with it anyway. Don't bottle up emotions, like Ned Flanders.

Posted by: dw

2012-01-31T13:00:49+00:00

because you're not letting us forget. You're not being constructive in your criticism; you're just being a junior high school kid. You rip the Suckerfish dropdowns, but the ones on your home page don't work correctly in IE6 -- 90% of all web browsers in use right now. And what happens when I turn off JavaScript? Are you going to block me from viewing your site completely? You need to look at these articles as a scientist, not as a junior high school kid. Some of this stuff is just pure experiementation. Some of it is genius. And some of it, honestly, leads down a dead-end street. You take what you like, critique what you don't like, and leave the rest. It's just like reading a scientific journal, except that this isn't JAMA or the Annuals of Psychology and focused purely on medicine or psychology (respectively), it's focusing on CSS and The New Code. Coming in here and saying "This idea doesn't work" or "I don't see what you're getting at" is reasonable. "This sucks" or "tables R00L all else is the SUX0R" isn't reasonable. You're the type who'd walk into Henry Ford's workshop and say the Model T sucks because it breaks down, so you ripped the engine off the front and put in a horse. We're talking about the way forward, you're talking about why we shouldn't even bother. If you have something constructive to say, say it. But don't come in here acting your age and ranting on while hiding behind your paper "free speech" shield. You want to talk hacks? I can explain all the table hacks we were doing five years ago, all hacks I'm more than happy to be rid of. Using a table to format was always a kludge, and even with the extreme pain that CSS subjects me to, I'm happy that I have another option that doesn't involved double-nested tables of doom. A majority of the people who read and post on here are legally adults. Please strive to be more grown up than them.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

1. Thank you for telling me about the IE bug. My IE was behaving very odd. I had a case of a virus. 2. I never, ever said "tables R00L all else is the SUX0R". In fact I steared clear of that whole "Tables for layout" argument. 3. ALA isn't leading people to go backwards? Look at the Flash Satay article. It sacrafices browser compatibility for standards. That's really moving forward. 4. If you turn off Javascript in my site, you'll see the plain, regular menu in the sidebar. Read my article for details. 5. ALA contradicts itself. "ALA is a serious webzine" I read. Then they published that Oz thing, comparing all this to prison. Very, very serious. 6. ??? 7. Profit!

Posted by: dw

2012-01-31T13:00:49+00:00

'"ALA is a serious webzine" I read. Then they published that Oz thing, comparing all this to prison. Very, very serious.' Oh, come on. There's always room for levity, even in science. http://www.improbable.com/

Posted by: matt

2012-01-31T13:00:49+00:00

some friends and i were talking about jS that would tell us the size of user browsers for positioning. this answers our questions...

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

You don't need an entire script to do that, just read out self.screen.width|height to get the width or height of the users monitor.

Posted by: sandy

2012-01-31T13:00:49+00:00

Just thought I'd let you know: even though I realize that examples 2 and 3 are not the final examples, I want to point out that any time I resize the windows, IE 5.2.3 for the Mac crashes. I am on Panther. Is anyone else experiencing that problem? However, 4, 5 and 6 examples do work properly, with footer at bottom of window, and don't crash when resizing.

Posted by: [m]

2012-01-31T13:00:49+00:00

"That's because I'm 14 (which makes me the youngest web developer)." Nice. You ruined almost all of your credibility and showed off your big ego in one sentence. Do you know every web developer out there? A common mistake to think, surely. And while we're at it, I'm 18. I know more about webdevelopment (and flash, but that's besides the point)than everyone I have ever met. Ever. There are people who don't know a single thing about webdesign and -development, yet hsve 3 children and still doesn't know what kind of 'thing' CSS is. Age is irrelevant. If you want to say something that contradicts the article, you have to provide facts supporting it. If you can't, then don't say it. I learned a lot from ALA, a large part of that comes from the comments. They give you insight in the article, like insta-experience in a can with an easy-to-peal(tm) lip. I did not learn from a 2 page rant about something that has already been discussed, everywhere. And with that, I end my comment. Let the good content flow again, shall we?

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Don't you know IE 5.2 Mac is a bug ridden crash prone piece of junk? See http://www.quirksmode.org for gory details. I detect a hint of jealousy from [m].

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

If you just used tables, we wouldn't have this problem: IE DOES support min-height on TDs. But oh well. That's too easy. Too bad you're standards and anti-table zealots.

Posted by: hector

2012-01-31T13:00:49+00:00

Just go away...

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I have a right to be here.

Posted by: Matt

2012-01-31T13:00:49+00:00

And we have every right to inform you that we don't much appreciate your self-righteous and senseless babbling about how you are the internet's last true designer, or whatever it is you think yourself to be. You're not that impressive if you want to know the truth. The rest of us here are concerned with intelligent discussion about the articles -- sorry kiddo, "ALA SUCKS!" just doesn't make the cut. So for the love of God, either pester some other people, or stay and make good use of your inherent communication skills by making some intelligent points once in a while. It's not much to demand of you, is it?

Posted by: Peterman

2012-01-31T13:00:49+00:00

Dante-Cubed wrote >>> If you just used tables, we wouldn't have this problem: IE DOES support min-height on TDs. But oh well. That's too easy. Too bad you're standards and anti-table zealots. <<< No-one's saying that you absolutely can't use tables. This particular article, however, says that "IF you absolutely don't want to use tables, this is the reality you'll have to face". Really, Apartness said all that needed to be said in the first page of posts: "It could even be viewed as an implicit critique of CSS". Now, which do you think is most useful: an article that says "Nah, CSS is too complicated; simply don't bother with it!", leaving the W3C to guess what designers need, or an article that says "THIS is what SHOULD be working, THIS is what you can do TODAY, and THIS is what still needs improving"? I'd like to remind you that up until this point, your comments on this article haven't actually been about the article, but about ALA in general. Now, I DO think you have the right to make general comments about ALA in these threads. But don't play the saint by saying that your comments are considered "flaming" just because people don't agree with them. You have shown yourself capable of serious discussion, and you've made some valid points. It would be nice to see you keep that up. But on the last page of posts, you're dismissing honest critiques, both on the article and on your posts, along the lines of "Jealous, huh?" or "Why are you even using that piece of shit browser?". One could get the impression that YOU are the one who's having trouble accepting different points of view.

Posted by: Jiř� Sekera

2012-01-31T13:00:49+00:00

http://jezek2.advel.cz/css/footer.html (try to click on "schovat text") http://vmalek.murphy.cz/victorias-vertical-centering-test-page.html

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

It's not very mature to not have backbone either... http://ile.ilxor.com

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I do have trouble accepting different points of view if they're only there to spite people and/or they're incredibly stupid. We web developers haven't the time to worry about Standards Zealots, as PPK so rightly labled them. I have made DOM progress with my Select Master and the DCScript Browser. It's people that won't let me have creativity that make me post crap as such. I can create a really great website with lots of cool yet accessible and usable DOM Scripts and CSS, but on my site's discussion forum I find that people from this very forum have posted rubbish about me not knowing anything about design because I don't use Valid XHTML. This is why I am so mad and immature.

Posted by: LK

2012-01-31T13:00:49+00:00

Bobby van der Sluis wrote: "The table height property is deprecated in XHTML," There was *never* a height attribute for the TABLE element in HTML (nor in RFC 1942). So it cannot be deprecated.

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

Technically speaking you are right. I don't think the W3C ever recommended a table height attribute in any of their specifications. However, the proprietary table height attribute was already existing and loads of designers and developers like myself were happily using it. Despite the request of a lot of people to include the table height attribute in the W3C specifications, the W3C specifically stated that the table height element was deprecated and shouldn't be used anymore. As a result the browser makers took the attribute out of their specs. The table height attribute can only be used in quirks mode. The latest versions of Opera don't even support the attribute in quirks mode anymore.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Why was it deprecated"? Oh I get it...the W3C just did it for the sake of doing it...seriously why?

Posted by: dw

2012-01-31T13:00:49+00:00

The W3C didn't think it made sense to add height in when a) it never was part of the spec to begin with and b) display attributes are part of CSS. So, why support something now you never supported in the first place, and why support it when your stated goal is to move display functions out of HTML? BTW, your dropdowns also break badly in Opera 7.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

It's not the Javascript tha breaks, it's the css. I don't know why. I have no time to deal with these bug ridden pieces of junk. So the dropdown will now only work in Internet Explorer. I don't like to do this, but it's the only browser that can get it right, even though all I hear about is its CSS bugginess.

Posted by: douglas

2012-01-31T13:00:49+00:00

Welcome to web design Dave. While none of us like to design around bugs, especially since certain browser developers are refusing to support the standards, these work arounds are necessary and needed. But it is also about creativity...and making the medium do more than it it was supposed to. If we had been content with html v.1, this page wouldn't be here. Excellent article, and thanks for the tip. Wish I'd seen it about 3 weeks ago when I was dealing with this issue.

Posted by: Honza

2012-01-31T13:00:49+00:00

Well, I for one will stick with the "old-school" table positioning for now, at least until I can get the CSS positioning to actually WORK in my browsers (Opera7.23,IE6). So far, I haven't been able to make any of your examples work in Opera:-( And that's the point - why bother making super-new-and-cool CSS2++ designs, when a large number of users don't really see the results? (my web sites' stats show about 60% of IE 5.0 and 5.5 combined)

Posted by: Leonard Zerri

2012-01-31T13:00:49+00:00

AMEN Brian! What a rediculous waste of time. It's like I want a Toyota but they don't have exactly what I want so rather than check out Nissan, I'm gonna build my own car from scratch. Utterly worthless. When the standards people and browser people get their act together I will delve into CCS beyond text formatting. javascript functions to get a footer on a page..please!!

Posted by: Leonard Zerri

2012-01-31T13:00:49+00:00

Typo: CCS = CSS

Posted by: Paul O'Brien

2012-01-31T13:00:49+00:00

Hi, Quote from article: "Note that if you set the height of the container to 100%, in standards mode the footer will always stay at the bottom of the browser window." Not true there is no need for any extra code or workarounds for ie5 or ie6 (pc) both will work fine with 100% as I have been using this for ages. The 100% container will reach to the bottom of the window or the bottom of the document if longer. Otherwise nice article.

Posted by: Rob

2012-01-31T13:00:49+00:00

Dante- go meet some girls, get out and smell the roses or something...from your posts it seems like you don't have a life. It's just an article. Take it or leave it. Move on.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I have moved on. The reason I'm staying here is because I'm trying to find out who it was that spammed up my message board. It was someone from this board. I'm writing a new article, "Give me Javascript or give me death", explaining why Js should be used.

Posted by: Matt

2012-01-31T13:00:49+00:00

Javascript is painfully over-used on your site. I'd rather you not tell people to follow your example with things like that strange pixel-coordinate-pointer-tracker. Yeah, like the world has been dying to know where their mouse stands on the screen in pixels. And your dropdowns - hideous and clunky. They kept changing size as I passed over the links, and in some bizarre cases, the pop-out menu was disconnected from the link that produced it, so it was impossible to actually make it to that menu and use those links before it disappeared. I don't know, I just get the feeling you ought to spend less time ranting about Javascript and more time actually getting it to work if you're trying to set some kind of great example. And you should probably ditch the tables and follow web standards too!

Posted by: Peterman

2012-01-31T13:00:49+00:00

Leonard Zerri wrote: >>> Utterly worthless. When the standards people and browser people get their act together I will delve into CCS beyond text formatting. <<< You know, this is 2004, not 1998. There are LOTS of things beyond text formatting that you can do with CSS, without having to resort to code-cluttering hacks or JavaScript.

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

Paul O'Brien: http://www.alistapart.com/discuss/footers/8/#c6700 Good to see that other people have found similar approaches to tackle the same issue. The article explains why a height of 100% works in IE5/WIN and IE6/WIN. I have to disagree with you that there is an error in the article. If you set the height of the container to 100% you get the following: http://www.bobbyvandersluis.com/articles/ala_footer_example2discuss.html This example doesn't work in Mozilla and Opera 7. A closer look at your example: http://www.pmob.co.uk/temp/3colfixedtest_4.htm tells me that you pass html>body #outer{height:auto;} to non-IE browsers too.

Posted by: Critter

2012-01-31T13:00:49+00:00

I learn a lot from the articles here at ALA, but even more from the discussions that follow them! (Although these Dante Diatribes are distracting to the point of the forum here, IMHO.) I particularly enjoyed Alberto's http://www.alistapart.com/discuss/footers/4/#c6589 comments and found them valid and entertaining as well. I thought he spoke well to the confusion and frustration some of us obviously feel about the problems and "solutions" in trying to make a living making useful, usable Websites. But whatever you may or may not think is the best way to code a page these days, the fact is that like an extended drum solo in a bad rock song, using CSS and XHTML in your coding is coming and there's nothing you can do about it. Standardization, Compliance and Usability are going to become more and more required, and knowing creative tricks and workarounds like these is going to make your skills a much more valuable commodity to your employers, customers or clients. If all you end up knowing or using is basic HTML then your going to find your self outsourced/offshored or replaced by some fascistic Content Management System that can do that kind of stuff automatically, and just as bad, without you. I'm just as annoyed, frustrated and confused at the whole state of affairs as the next coder here, but I do find the whole situation exciting as well. This is the "cutting edge" here folks, and though I don't particularly have a use for this "solution" I like to learn something new and may find a use for the functions used here. I also appreciate the time and effort that these folks and most of you fellow readers and commentors here put into researching, developing, testing and providing this kind information and solutions to us FREE! When I feel like I'm getting too wound up or serious about something, I like to keep a quote the Firesign Theater in mind in these kinds of situations - "Everything You Know is Wrong!" I laugh to myself and move on to learn some more, even if it turns out to be wrong sometimes too. Keep up the great work here all of you, and give me more!

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

Apparently posting something along the lines of "Here thar be trolls" is the most effective kind of troll bait. But I do think that Dante was fine until someone provoked him. He wasn't exactly professional, but see that whole levity argument that's already been discussed around here. But, two wrongs don't make a right and having someone behave towards you like a snotty little brat does not grant permission to act the same. That comment has nothing to do with age, just behaviour. I have a 4 year old daughter and I fully expect her to be able to code circles around me in 10 years.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I know. The pixel tracker thing, oops. I forgot to remove it. I used it to find the position of the menus. I'm redesigning anyway, but for the time being the only people who will have trouble with the menus are non-IE users, the number of which is far too small for me to care about. Most of my users use IE, so I'm not that concerned; not to say I'm not concerned at all.

Posted by: Matt

2012-01-31T13:00:49+00:00

I visited using IE 6 for Windows, so I don't know, things might not work so smoothly after all. Beats me.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

In the new navigational redesign of my site, the drop downs will go the way of Abe Lincoln in Forbe's theater. Guess who's been reading the works of Walt Whitman? Derek, in 10 years your daughter will be interested in boys and other stuff. The only coding she'll do is with cell phone text messaging, which is technically encoding.

Posted by: Bryn Dyment

2012-01-31T13:00:49+00:00

What does it mean when the 'body' and 'html' elements are set to 100%? Is there some official/semi-official information on this? Also, two (very) small items. There's still a typo in the article. "Now you can calculate..." should be "Now THAT you can calculate...". And, it's maybe a little clearer in the JavaScript to have: if (windowHeight <= (contentHeight+footerHeight)) ... rather than the more complex expression that subtracts the two terms and compares them to zero. Great article!

Posted by: Bobby van der Sluis

2012-01-31T13:00:49+00:00

Thanks, you can find more info about this at: http://www.quirksmode.org/css/100percheight.html

Posted by: Mike Bryan

2012-01-31T13:00:49+00:00

Often found that printing a webpage gave very poor results with regard to page breaks. If this code can be adapted to set page breaks, than I think it would have a strong impact on the web community.

Posted by: Peter

2012-01-31T13:00:49+00:00

Very useful article. I solved problem with the similar positioning on one my project. Thanks

Posted by: Robert Dunham

2012-01-31T13:00:49+00:00

Take a breath. Breath deeply. I've seen where some of you think that this technique is pointless. Perhaps you're overlooking the possibilities. "I cannot see it as useful to have a footer at the bottom of the browser window." Well, here are some examples of when it might be quite useful. Let's suppose you have a copyright block and your using global CSS for a site template. This is a great way to keep a uniform look about your site, or suppose for a moment that you have dynamic content and don't want to destroy the layout of your page as it changes. Or how about that fancy web-based email system you just implemented. Or any CGI interface for that matter. It's much easier to program using a global stylesheet that it is to adjust table layouts for each individual page the script returns. Granted, if you have only a few select pages requiring this technique, it may be easier and faster to use tables, but when used on a wider scale. Or maybe you have a wide range of pages that carry your rotating banner or some other dynamic content such as an RSS feed. This is a simple way to ensure proper alignment without having to reconstruct each person's page layout. A simple technique, with limitless possibilities. Perhaps we need to start thinking outside the box. Very good article.

Posted by: Robert Dunham

2012-01-31T13:00:49+00:00

Just to clarify, a footer appears and the bottom of an element and as such is much easier to control. So in essence this technique may not be necessary in most cases. However, let's assume that we expand this technique as proposed to align elements in other vertical positions. Say you want to align a watermark or a DHTML menu, or some navigational buttons. Maybe you want to align some form elements so that your form will align nicely to fit a browser windows regardless of the window size or default accessibility settings. Now we have a simple technique that has become quite priceless. Not to mention that it is cross-browser compliant which, in essence, could be it's greatest attribute of all.

Posted by: thomas

2012-01-31T13:00:49+00:00

The "Dead Center" examples both don't work in IE/Mac if the doctype is XHTML Transitional: I guess it's not the biggest of all deals but enough to have me cursing to Redmond again. All I want is to center an old-school table layout with a nested

vertically and Internet Explorer keeps f&/%n everything up. Oh well, what's new?

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

You're not the only with IE/Mac problems. Peter-Paul Koch declared IE 5.2 Mac a "Bug Ridden Crash Prone Piece of Junk". I can't really test this as I don't have a Mac. IE on mac has never been good. Give Internet Explorer some credit.

Posted by: Perl Poet

2012-01-31T13:00:49+00:00

Hey Dante, I think the problems you are having with CSS and non-IE browsers relate to a missing } in your CSS. I looked at it the other week and that's what I saw.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

It's caused by this: -moz-box-sizing I put that there because the Moz box model is the crack model (the W3C model), the one that makes no sense. Solution: Put whatever selector that contains -moz-box-sizing at the end of the stylesheet; making sure -moz-box-sizing is the last declaration.

A List Apart: Comments on: Exploring Footers

Posted by: Jeremy Flint

Posted by: jim

Posted by: Brian

Posted by: Stuart

Posted by: Martin Brown

Posted by: Brian R. James

Posted by: apartness

Posted by: John P. Yuda

Posted by: apartness

Posted by: dave rau

Posted by: gc

Posted by: Fabian

Posted by: Anne

Posted by: James Atkinson

Posted by: 4.01

Posted by: The Bead Man

Posted by: David Graham

Posted by: Anne

Posted by: Tom Dell'Aringa

Posted by: Bobby van der Sluis

Posted by: Jim

Posted by: Chris Jennings

Posted by: Jeremiah McElroy

Posted by: Vinnie Garcia

Posted by: Dave

Posted by: greut

Posted by: Terry

Posted by: Phillip

Posted by: Big John

Posted by: Martijn ten Napel

Posted by: atmosfilter

Posted by: Sven Neuhaus

Posted by: zachary

Posted by: J. Hoffman

Posted by: Alberto

Posted by: Bobby van der Sluis

Posted by: Voodoo Joe

Posted by: goetsu

Posted by: irvin

Posted by: apartness

Posted by: George Calderon

Posted by: Francesco Sanfilippo

Posted by: setmajer

Posted by: Joe McBride

Posted by: Sean

Posted by: Bobby van der Sluis

Posted by: Steve Bailey

Posted by: Sir Max

Posted by: Derek Pennycuff

Posted by: sanchez

Posted by: Dante-Cubed

Posted by: Derek Pennycuff

Posted by: Christopher Mahan

Posted by: Dante-Cubed

Posted by: dw

Posted by: Dante-Cubed

Posted by: dw

Posted by: matt

Posted by: Dante-Cubed

Posted by: sandy

Posted by: [m]

Posted by: Dante-Cubed

Posted by: Dante-Cubed

Posted by: hector

Posted by: Dante-Cubed

Posted by: Matt

Posted by: Peterman

Posted by: Ji&#345;� Sekera

Posted by: Dante-Cubed

Posted by: Dante-Cubed

Posted by: LK

Posted by: Bobby van der Sluis

Posted by: Dante-Cubed

Posted by: dw

Posted by: Dante-Cubed

Posted by: douglas

Posted by: Honza

Posted by: Leonard Zerri

Posted by: Leonard Zerri

Posted by: Jiř� Sekera