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:

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