SitePoint.com

Paul O'B · Apr 19, 2009, 08:10

CSS - Test Your CSS Skills Number 21 :Quiz now ended - Solution in post #48

I promised you a quiz that would be a stickler so here it is

Most of you already know how to make a "sticky footer" but in case you didn't here's a quick recap of the requirements.

A "sticky footer" is a fixed height footer that sits at the bottom of the viewport, but only sits at the bottom of the viewport when there is not enough content to push it below the fold.

If the page has more content than can fit in the viewport then the footer sits at the bottom of the content. It is not a fixed footer so don't confuse it.

Here is a basic sticky footer that you can use as a start

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
*{margin:0;padding:0}
html,body{height:100%}
#outer{
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height*/
}
* html #outer{height:100%}
#header{
    border-top:40px solid #fff;/* soak up negative margin*/
    background:red;
}
#footer{
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin and header soak up*/
}

</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Now you may be wondering since I have given you the answer that this is going to be quite easy

The problem I want you to solve is that the above code does not work in IE8 and does not work in Opera either.

If you run the above code in Opera or IE8 everything at first appears to be correct. However if you grab the bottom of the window (not the sides) and move it up or down then the footer does not move with the window but stays put unless the screen is refreshed or if you resize horizontally.

A vertical resize does not have any effect. This is undesirable and spoils a useful technique.

I have attached a screenshot of the IE8 and Opera problem so that you can understand it better.

Your mission is to make a version that will also work in IE8 and Opera (as well as ie6/7 and all other modern browsers).

This is a real life quiz as I answer these questions daily although the IE8 problem is a relatively new one.

Rules:

Must work in IE8 and Opera (as well as the existing browsers that it already works with).
The layout must work in various types of layouts (e.g. a centred layout or in a 100% wide layout) and must work with and without content.
No scripting allowed.
You can use conditional comments for the different IE versions.
The simpler the answer the better but whatever method you use this must be usable and robust .
You can use your own html and css

I know of about 3 ways to solve this so there is room for variety. Hopefully some of you will find other ways that I have not thought of.

Remember that "testing is the key" here and you must make sure that it works before you send it to me

Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

Any questions just ask and remember this is just for fun

Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
test13: test 14: test 15: test 16: test 17:test18 test 19:
test 20:

YuriKolovsky · Apr 19, 2009, 09:17

hmm, my email check program sure comes in handy with finding out about new quizzes.
and the fact that im in front of the pc all day. xD

Quote:

Your mission is to make a version that will also work in IE8 and Opera

mission accepted.

will be worked upon, this sunset.

Paul O'B · Apr 19, 2009, 10:02

Quote:

Originally Posted by YuriKolovsky

mission accepted.

This thread will now self destruct in 30 seconds

a2K · Apr 19, 2009, 13:54

Oooo I am so close

RyanReese · Apr 19, 2009, 14:38

Submitted-took me 30 seeconds.

Paul O'B · Apr 19, 2009, 15:11

Hi Ryan that's very close but needs tidying up a little.

You have found one of the solutions for IE8 and opera (although you wouldn't actually need to look too far but well spotted anyway)

RyanReese · Apr 19, 2009, 15:15

I tidied it up so all is well now. Was I first one? PS: I knew how to do the quiz from the start-I didn't look anywhere lol.

Paul O'B · Apr 19, 2009, 16:18

You are the first one with a working version in Opera and also IE8 but I have had one that works in IE8 from Gary Turner.

RyanReese · Apr 19, 2009, 16:29

Ok, going to test for more of the possible ways to do the quiz-I only knew of the 1.

Edit:

I can get the footer to stay at the bottom but it is cheating since it doesn't really fix the vertical resize issue.

RyanReese · Apr 19, 2009, 16:56

Another solution PM'd

kohoutek · Apr 19, 2009, 17:20

Before I send anything, I'd like to ask a question:

The footer must NOT overlap the content, regardless of the height of the viewport, so even if I had a 400px high viewport filled with content, the footer MUST sit below it. Is that correct?

I'm asking specifically because I have no problem making the footer sit at the bottom in Opera when resizing the window vertically, but I do have a problem making the footer not overlap content when resizing it to a narrower height than its content.

RyanReese · Apr 19, 2009, 17:23

If you have more content then the viewport it pushes the footer down and thus keeps the key point that the footer sticks to the bottom of the window.

If you don't have enough content (as with the code Paul posted) then it goes to the bottom automatically and stays there on resize.

kohoutek · Apr 19, 2009, 17:28

Quote:

Originally Posted by RyanReese

If you have more content then the viewport it pushes the footer down and thus keeps the key point that the footer sticks to the bottom of the window.

If you don't have enough content (as with the code Paul posted) then it goes to the bottom automatically and stays there on resize.

Thanks, Ryan. But that is not my issue. If I understand correctly (and please do correct me, if I'm misunderstanding) the solution should work with and without content. I have created a sample WITH content. Let's say I have content that is around 400px in height and I resize the window to, say, 40px in height, then the footer will overlap everything. This is to be avoided. Is the assumption correct that the footer MUST NOT overlap any content regardless of my chosen viewport height?

RyanReese · Apr 19, 2009, 17:30

Yes you are right it should not overlap the content though you are overthinking it and trying to get it perfect

. I just turned mine in without content and for the basics of this quiz I didn't care about making it fit every criteria.

kohoutek · Apr 19, 2009, 17:37

Quote:

Originally Posted by RyanReese

Yes you are right it should not overlap the content though you are overthinking it and trying to get it perfect

. I just turned mine in without content and for the basics of this quiz I didn't care about making it fit every criteria.

You are right and it explains why I'm ditching one idea after the next. I have two different examples that both work in all older browsers + IE8 and Opera 9, but (with content) the footer overlaps the content when you minimize the window vertically to a ridiculously narrow vertical size and I don't want to submit it like this.

Stomme poes · Apr 20, 2009, 01:38

What should happen when you pull the bottom of the browser up, and you have content, is the footer should disappear, just like any other footer would.

I've already seen the Opera solution, maybe I just never resized Opera before but I'd never noticed the problem before, and just added the old hack to a site yesterday : ) I suppose I should look to see how well it worked.

IE8, still haven't downloaded. Maybe I could put it on the crappy work machine : )

Paul O'B · Apr 20, 2009, 03:10

Hi,

Quote:

Originally Posted by kohoutec

Let's say I have content that is around 400px in height and I resize the window to, say, 40px in height, then the footer will overlap everything. This is to be avoided. Is the assumption correct that the footer MUST NOT overlap any content regardless of my chosen viewport height?

This has been already explained but I'll try to clarify it a bit more

The footer should never overlap any content at all.

If you have a small amount of content the footer will sit at the bottom of the viewport. If you then resize the window smaller the footer will still stay at the bottom of the viewport until such time as it meets any content and then it stops going up just like a normal layout would.

If you have a large amount of content then the footer is pushed below the fold and sits under all your content.

The footer should never overlap the content and is the reason that a "sticky footer" needs to be a fixed height so that you can account for the fact that it will overlap unless you do something to stop it

If you are still not sure then just test out the code I gave above in IE6/7 Firefox and see how it behaves with and without content when you resize the screen etc.

If you have a fluid width footer containing fluid content then there obviously would be a point where the text will spill out of the height when the window is squeezed smaller.

This is why fixed footers are best for a small coyright message, logo or a couple of small links. They are not suitable for lots of content in a fluid design. In a fixed width you can obviously cater for it much better and have more content as the height won't change.

Hope that clears it up

zcorpan · Apr 20, 2009, 04:18

Quote:

Originally Posted by Paul O'B

I know of about 3 ways to solve this so there is room for variety. Hopefully some of you will find other ways that I have not thought of.

I know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.

Anton P · Apr 20, 2009, 04:52

Quote:

Originally Posted by zcorpan

I know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.

I'm sure they'd be grateful! No need for such generosity however: just file your bugs for Opera at bugs.opera.com/wizard/. My Opera 10a is certainly incorrect in how it displays Paul's example on first load or page refresh (although it corrects itself when resizing the viewport width).

The resizing issue itself isn't a standards-comliance bug, however. CSS does not dictate browser UI behaviour, and browsers have no obligation to reflow a page when the viewport dimensions are changed. In practice though, any browser which failed to reflow on width changes would be very unpopular. Reflowing on height changes is a much less pressing concern, but still desirable of course. You could certainly send this issue to MS and Opera as an enhancement request.

Happily for us there are work-arounds, as the quiz demonstrates!

YuriKolovsky · Apr 20, 2009, 04:57

ok, yea, posted my solution, which is actually also one of your solutions paul.
i didn't want to invent anything too complex this time, trying to learn to be more simple.

Quote:

This thread will now self destruct in 30 seconds

hahaha, [jumps to cover]

Quote:

Ryan
Submitted-took me 30 seeconds.

seems ryan is the only one who made it out alive.

edit:

Quote:

Stomme poes
IE8, still haven't downloaded. Maybe I could put it on the crappy work machine : )

i dont see why you cant install ie8 on your machine? or is it cause it's a linux or something?
i dunno, but i just use IEtester for ie5-ie6-ie7 testing (which im sure you know about, but giving link to those who dont know)
and i installed ie8 on my main machine, because its the only ie, im capable to look at without crying.

p.s. i use windows for the purpose of methodically learning every bug that it has.

squig · Apr 20, 2009, 05:06

Really pleased that you've chosen this test, as it's one I've been banging my head against for two weeks now. I know this doesn't say much for my CSS skills (especially when Ryan can solve it in 30 seconds

) but at least I might find out the answer in a few days' time.

Flippin' IE8!

b.t.w. does anyone know what the "correct" behaivour is with respect to the CSS standards for this situation? Are IE8 and Opera ahead of the game and we all need to catch up, or are they just plain wrong?

zcorpan · Apr 20, 2009, 05:18

Quote:

Originally Posted by Anton P

I'm sure they'd be grateful! No need for such generosity however: just file your bugs for Opera at bugs.opera.com/wizard/.

We have several duplicate reports about this bug already. Hence the beer.

(I work at Opera.)

Quote:

Originally Posted by Anton P

My Opera 10a is certainly incorrect in how it displays Paul's example on first load or page refresh (although it corrects itself when resizing the viewport width).

Yes, known bug.

Quote:

Originally Posted by Anton P

The resizing issue itself isn't a standards-comliance bug, however. CSS does not dictate browser UI behaviour, and browsers have no obligation to reflow a page when the viewport dimensions are changed.

Still, I would argue that this is clearly a bug.

YuriKolovsky · Apr 20, 2009, 05:23

Quote:

squig
b.t.w. does anyone know what the "correct" behavior is with respect to the CSS standards for this situation? Are IE8 and Opera ahead of the game and we all need to catch up, or are they just plain wrong?

i would say plain wrong, as the currently modernest (not a real word) browser (safari 10 to my knowledge) does not have this bug.

IE8 simply avoids re-calculating the height if the width is not changed.
your objective is to interrogate and force ie8 to do it.

while opera ignores the whole min-height:100% completely, and needs some suggestive css explaining for it to work.
the same tactic as with ie8 works here too.

edit:
applause to paul, because these quizzes are by far the best references for css tips and tricks.

Anton P · Apr 20, 2009, 06:03

Quote:

Originally Posted by zcorpan

I work at Opera.

Heh, I've returned to this thread to explain that I'd just figured that out from a comment by Paul in another thread

. Now that I look at your signature, I recognize your name from Opera articles and W3C WG mailing lists. Hope you're doing fine!

Paul O'B · Apr 20, 2009, 06:23

Quote:

Originally Posted by Simon

know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.

To Simon -

Will that do

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Apr 19, 2009, 13:54	#4
a2K Non-Member Join Date: Apr 2009 Posts: 115	Oooo I am so close

Apr 19, 2009, 14:38	#5
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Submitted-took me 30 seeconds.

Apr 19, 2009, 15:11	#6
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,593	Hi Ryan that's very close but needs tidying up a little. You have found one of the solutions for IE8 and opera (although you wouldn't actually need to look too far but well spotted anyway)

Apr 19, 2009, 15:15	#7
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	I tidied it up so all is well now. Was I first one? PS: I knew how to do the quiz from the start-I didn't look anywhere lol.

Apr 19, 2009, 16:18	#8
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,593	You are the first one with a working version in Opera and also IE8 but I have had one that works in IE8 from Gary Turner.

Apr 19, 2009, 16:29	#9
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Ok, going to test for more of the possible ways to do the quiz-I only knew of the 1. Edit: I can get the footer to stay at the bottom but it is cheating since it doesn't really fix the vertical resize issue.

Apr 19, 2009, 16:56	#10
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Another solution PM'd

Apr 19, 2009, 17:20	#11
kohoutek Mah-lye-kuh Join Date: Aug 2004 Location: Hamburg, Germany Posts: 2,364	Before I send anything, I'd like to ask a question: The footer must NOT overlap the content, regardless of the height of the viewport, so even if I had a 400px high viewport filled with content, the footer MUST sit below it. Is that correct? I'm asking specifically because I have no problem making the footer sit at the bottom in Opera when resizing the window vertically, but I do have a problem making the footer not overlap content when resizing it to a narrower height than its content.

Apr 19, 2009, 17:23	#12
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	If you have more content then the viewport it pushes the footer down and thus keeps the key point that the footer sticks to the bottom of the window. If you don't have enough content (as with the code Paul posted) then it goes to the bottom automatically and stays there on resize.

Apr 19, 2009, 17:30	#14
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Yes you are right it should not overlap the content though you are overthinking it and trying to get it perfect . I just turned mine in without content and for the basics of this quiz I didn't care about making it fit every criteria.

Apr 20, 2009, 01:38	#16
Stomme poes Site Point Member Join Date: Aug 2007 Location: Netherlands Posts: 2,676	What should happen when you pull the bottom of the browser up, and you have content, is the footer should disappear, just like any other footer would. I've already seen the Opera solution, maybe I just never resized Opera before but I'd never noticed the problem before, and just added the old hack to a site yesterday : ) I suppose I should look to see how well it worked. IE8, still haven't downloaded. Maybe I could put it on the crappy work machine : )

Apr 20, 2009, 05:06	#21
squig SitePoint Member Join Date: Oct 2004 Location: Alton, Hampshire, UK Posts: 1	Really pleased that you've chosen this test, as it's one I've been banging my head against for two weeks now. I know this doesn't say much for my CSS skills (especially when Ryan can solve it in 30 seconds ) but at least I might find out the answer in a few days' time. Flippin' IE8! b.t.w. does anyone know what the "correct" behaivour is with respect to the CSS standards for this situation? Are IE8 and Opera ahead of the game and we all need to catch up, or are they just plain wrong?