|
|||||||
New to SitePoint Forums? Register here for free!
|
![]() |
|
|
Thread Tools | Display Modes |
|
|
#1 |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
CSS - Test Your CSS Skills Number 21
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:
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: Last edited by Paul O'B; Apr 24, 2009 at 14:18. |
|
|
|
|
|
#2 | |
|
Hibernator
![]() ![]() ![]() ![]() ![]() Join Date: Nov 2007
Location: Malaga, Spain
Posts: 747
|
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:
will be worked upon, this sunset. |
|
|
|
|
|
|
#3 |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
|
|
|
|
|
|
#4 |
|
Non-Member
![]() ![]() Join Date: Apr 2009
Posts: 115
|
Oooo I am so close
![]() |
|
|
|
|
|
#5 |
|
CSS Guru in Training
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Oct 2008
Location: Whiteford, MD
Posts: 8,673
|
Submitted-took me 30 seeconds.
|
|
|
|
|
|
#6 |
|
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) ![]() |
|
|
|
|
|
#7 |
|
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. |
|
|
|
|
|
#8 |
|
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.
![]() |
|
|
|
|
|
#9 |
|
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. |
|
|
|
|
|
#10 |
|
CSS Guru in Training
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Oct 2008
Location: Whiteford, MD
Posts: 8,673
|
Another solution PM'd
|
|
|
|
|
|
#11 |
|
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. |
|
|
|
|
|
#12 |
|
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. |
|
|
|
|
|
#13 | |
|
Mah-lye-kuh
![]() Join Date: Aug 2004
Location: Hamburg, Germany
Posts: 2,364
|
Quote:
|
|
|
|
|
|
|
#14 |
|
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. |
|
|
|
|
|
#15 |
|
Mah-lye-kuh
![]() Join Date: Aug 2004
Location: Hamburg, Germany
Posts: 2,364
|
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.
|
|
|
|
|
|
#16 |
|
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 : ) |
|
|
|
|
|
#17 | |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
Hi,
Quote:
![]() 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 ![]() |
|
|
|
|
|
|
#18 |
|
⠵
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Dec 2004
Location: Sweden
Posts: 2,423
|
|
|
|
|
|
|
#19 | |
|
SitePoint Enthusiast
![]() Join Date: Jan 2009
Posts: 42
|
Quote:
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! Last edited by Anton P; Apr 20, 2009 at 05:06. Reason: Clarified Opera 10a's bugginess |
|
|
|
|
|
|
#20 | |||
|
Hibernator
![]() ![]() ![]() ![]() ![]() Join Date: Nov 2007
Location: Malaga, Spain
Posts: 747
|
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:
Quote:
edit: Quote:
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. |
|||
|
|
|
|
|
#21 |
|
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? |
|
|
|
|
|
#22 | ||
|
⠵
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Dec 2004
Location: Sweden
Posts: 2,423
|
Quote:
(I work at Opera.)Quote:
Still, I would argue that this is clearly a bug. |
||
|
|
|
|
|
#23 | |
|
Hibernator
![]() ![]() ![]() ![]() ![]() Join Date: Nov 2007
Location: Malaga, Spain
Posts: 747
|
Quote:
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. |
|
|
|
|
|
|
#24 |
|
SitePoint Enthusiast
![]() Join Date: Jan 2009
Posts: 42
|
|
|
|
|
|
|
#25 | |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
Quote:
![]() ![]() Will that do ![]() |
|
|
|
|
![]() |
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
|
|
|
All times are GMT -7. The time now is 16:06.











) but at least I might find out the answer in a few days' time.
. Now that I look at your signature, I recognize your name from Opera articles and W3C WG mailing lists. Hope you're doing fine!



Linear Mode
