The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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.

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?

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.

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.

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 : )

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.

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.

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.

This thread will now self destruct in 30 seconds

hahaha, [jumps to cover]

Ryan
Submitted-took me 30 seeconds.

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

edit:

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.

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?

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.)

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.

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.

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&#37; 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.

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!