Question on Paul O'B's Sticky Footer

HTML & CSS
1

Hi all.

I’m doing an assignment for TAFE at the moment, building an online shopping site with CMS using ASP.NET and I decided to go for the extra degree of difficulty (just like an idiot!) and use a sticky footer. I used the sticky footer created by Paul O’Brien, and it works a treat by the way, and what’s more, it’s the same across all browsers, -except IE6- great work by all involved. Now, I want to point out here that I don’t give a rats a#$e about IE6. It’s not a requirement for this assignment that the site look perfect in that particular dinosaur of a browser.

My question though is this. The sticky footer has some alternate IE css rules:

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

Why does this try to give IE6 a display of table? I thought that none of the Internet Exploder’s before IE8 would render display: table. So, I’m waiting anxiously for any answers that may be forthcoming. :slight_smile:

Have a good one.

Tim.

2
  • IE 6 cannot use a majority of display’s properties correctly. float has been known to be the workaround.
3

Why does this try to give IE6 a display of table? I thought that none of the Internet Exploder’s before IE8 would render display: table. So, I’m waiting anxiously for any answers that may be forthcoming. :slight_smile:

Hi,
That IE CC is not trying to give IE6 display:table;
It is giving IE6 height:100%; as a min-height workaround since IE6 treats height as min-height due to it’s expanding box bug.

IE8 gets the display:table;while IE6 ignores it.

A complete explanation of the Modern Sticky Footer can be found at Paul’s search-this.com article.
Sticky Footers - A Sticky Subject!

However, if you read through the comments at the end of the article you will see that we have found another way to cater to IE8 without using the display:table; That allows us to eliminate all IE CC’s

We have also eliminated the extra wrapping div that was needed for Opera and worked the IE8 fix into the pseudo:after element with height:1% to force IE8 to to reference the parent’s min-height:100%;

The updated Sticky Footer code can be seen in these examples -

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
http://www.css-lab.com/demos/stickfoot/stickfoot-1.html

Hope that helps :slight_smile:

4

Hi Rayzur.

That’s a great explanation and makes perfect sense. I’ll be reading the articles and links you’ve posted. I want to try and get my head around the more complex vagaries of css to help take my designs to the next level, and I’m of the opinion that I need to understand WHY these things work, and not simply muck around with something that someone else has done with no further understanding of it’s working -if that makes sense.

Anyway, thanks for your reply, it has been most helpful.

All the best,

Tim.