CSS - Test Your CSS Skills Number 21

**YuriKolovsky** · Apr 28, 2009, 05:29

k, had free time, and i made a paul/maleika mix result, featuring the best of both solutions

Code CSS:

<!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">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
}
/* #inner protects any floats in the content from clearing the minheight float */
#inner {
    width:760px;
    overflow:hidden;/* you could use float:left if you wanted content to overflow*/
    /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}
#header {
    background:red;
    border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin of #outer */
    clear:both;
}
 
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
}
/*Opera Fix*/
/*IE8 Fix*/
#outer:after {
	content:"";
	float:left;
    width:0;
    height:100%;
    overflow:hidden;/* just in case*/
}
/*IE8 Fix*/
 
</style>
<!--[if lt IE 8]>
<style type="text/css">
* html #outer {height:100%}/* ie6 needs this*/
.minheight{display:none}/* ie6 and 7 don't need this */
</style>
<![endif]-->
</head>
<body>
 
<div id="outer">
    <div id="inner">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>

**Paul O'B** · Apr 28, 2009, 06:36

Thanks Yurikolovsky

Taking your lead here is another amalgamated version making the best of all worlds also.

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">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100&#37;;/* needed to base 100% height on something known*/
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
}
/* #inner protects any floats in the content from clearing the :before float */
#inner {
    width:760px;
    overflow:hidden;
    /* you could use float:left instead of overflow:hidden if you wanted content to overflow*/
    /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}
#header {
    background:red;
    border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin of #outer */
    clear:both;
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
}

</style>
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>

**YuriKolovsky** · Apr 28, 2009, 07:14

i bet someone will make a even smaller/lighter version out of this :]

by the way, i have never seen

Code:

<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100&#37;;display:table;}
</style>
<![endif]-->

conditional comments like these before.

also its a much better way of fixing the ie8 bug, its like 3 worlds now xD

edit:
it also looks stable enough to be used in a real world website without any fear.

also whoever finds this, looking for a sticky footer demo will definitely find this much more useful than all the other crappy sticky footers that i see all over the internet.

also you just gotta love the simple design of this solution.

**Paul O'B** · Apr 28, 2009, 12:27

[quoet]
by the way, i have never seen
[/quote]

Yes there are a number of operators that you can use within conditional comments such as "!"= "not" and "|" = "or".

There's a full rundown here.

edit:
it also looks stable enough to be used in a real world website without any fear.

As far as I can tell it seems very stable but time will tell

**YuriKolovsky** · Apr 28, 2009, 23:43

thanks for the link on conditional comments, very informative.

edit:
this code in the comments section

Code:

<!--[if IE 7 ]><div id="IE7"><![endif]-->
<!--[if IE 6 ]><div id="IE6"><![endif]-->

<p>regular html content</p>

<!--[if (IE 6)|(IE 7)]></div><![endif]-->

p {/* code for standard browsers*/}
div#IE6 p {/* code for IE6 */}
div#IE7 p {/* code for IE7 */}

really did catch my eye, because i never thought of it like that.
the only question here is.
do the normal browsers (not ie) download the external stylesheets within ie's conditional comments?
if not then the above is pointless (it is slightly faster for ie), if yes, then the above is a better way of doing ie specific code.
it is definitely a better approach for small sites that require very few website-wide ie fixes.

**Stomme poes** · Apr 29, 2009, 00:59

As I understand it, conditional comments to a non-ie browser are treated like comments period. They must be loaded, they appear in View Source, but other than that, browsers take no consideration of them.

IE-CC-placed elements who are addressed in the regular css sheet are treated by browsers as declarations for elements that don't exist in the HTML.

If you're calling a <link> to an IE stylesheet in the <head> inside an IE-CC then the non-IE browsers don't do the GET request, but they see the comment in the <style> tag. If I look at my headers, Firefox doesn't call
<if IE blah blah>
<link rel="stylesheet" blah blah.... ie-only.css">
</endif blah blah>

from the server.

**YuriKolovsky** · Apr 29, 2009, 01:14

Stomme poes
If I look at my headers, Firefox doesn't call "blah.blah.ie-only.css"

well that is a good thing to know.
>now why didn't i think of checking my headers in firefox!?!

thinking some more about that method, it is definitely better for the ie part of the internet, especially in small websites with little ie-only css.
(in terms of performance)
(the gain might be minimal, but small+small = medium)

**RyanReese** · May 7, 2009, 17:04

Next quiz time??

**Paul O'B** · May 8, 2009, 00:37

Hi Ryan,

I have one lined up for Sunday (or Saturday if I can get through my workload by then)

**YuriKolovsky** · May 8, 2009, 00:49

it seems in not the only one with a workload then xD

**Paul O'B** · May 8, 2009, 01:17

Yes work always gets in the way of having a good time

**RyanReese** · May 8, 2009, 03:45

I think it should be saturday morning..

**Paul O'B** · May 8, 2009, 12:56

New Quiz Posted.

**Rayzur** · May 17, 2009, 10:28

Hmm, My copy of IE8 seems to be rendering the older sticky footer layouts just fine now. Perhaps the IE development folks viewed this thread and corrected the problem in a recent windows update.

Paul, is your Ultimate Sticky Footer working in IE8 for you now?
It does for me!

**Paul O'B** · May 17, 2009, 23:55

Originally Posted by Rayzur

Hmm, My copy of IE8 seems to be rendering the older sticky footer layouts just fine now. Perhaps the IE development folks viewed this thread and corrected the problem in a recent windows update.

Paul, is your Ultimate Sticky Footer working in IE8 for you now?
It does for me!

Hi Ray,

That one isn't working in My IE8 (8.0.6001.18702). It works in compatibility view but not in IE8 for real.

Is there a newer version than mine about?

**Rayzur** · May 18, 2009, 00:29

That one isn't working in My IE8 (8.0.6001.18702). It works in compatibility view but not in IE8 for real.
Is there a newer version than mine about?

Upon checking my version I see that it is the same (8.0.6001.18702).
I have compatibility view turned off also and all my sticky footer layouts are working now. I remember viewing them back at the time of this quiz and sure enough they didn't work, hence the reason for the quiz. I assumed that there may have been a fix added to IE8 in one of my recent windows updates. I don't know what the deal is, I'll double check again.

**Paul O'B** · May 18, 2009, 01:00

That's strange let me know what you find out.

I would have assumed the version number would have been changed if IE8 had been updated.

Remember the problem with IE8 is not on first page load but only when you try to resize the viewport vertically.

**Rayzur** · May 18, 2009, 07:15

Originally Posted by Paul O'B

Remember the problem with IE8 is not on first page load but only when you try to resize the viewport vertically.

Hi Paul,
Ok, that's what I was missing. Reading back through your first post of this thread I see where you explained that and sure enough they are not working. That is the same problem with IE7 and the height:auto!important; rule.
Sorry about the confusion, I'll get the IE8 fix updated on my demos asap.

**Paul O'B** · May 18, 2009, 09:10

Thanks Ray

Hopefully it will be a bug that gets addressed sometime soon.

**Paul O'B** · Sep 16, 2009, 04:09

Update

A fix for the extra wrapper needed due to the opera fix can be found here:

http://www.sitepoint.com/forums/show...80#post4377680

and amalgamated into this demo.

Thanks to Erik and Ray for pursuing this further

User Tag List

Thread: CSS - Test Your CSS Skills Number 21

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions