Comments on: CSS – A Sticky Subject

By: Paul OB

Paul OB — Mon, 23 Nov 2009 15:13:27 +0000

Thanks for the comments Ray and yes I think all areas are covered nicely now with Erik’s extra fix:)

By: Ray H.

Ray H. — Sun, 22 Nov 2009 08:38:19 +0000

>>(This also raises another interesting point in that adding overflow:hidden to #outer kills the sticky footer effect in Opera.)

Hi Paul,

I had also noticed that overflow:hidden; on the parent div caused problems in Opera.

Opera’s issue along with the option of allowing content to protrude outside of the parent without being cut off was the reason I had preferred the :after float clearing method.

Erik’s solution of height:1% does indeed seem to be a solid fix for IE8 which eliminates the need for any Conditional Comments or IE stylesheets.

By: Erik J

Erik J — Thu, 15 Oct 2009 11:35:25 +0000

Sorry for the double post.

By: Erik J

Erik J — Thu, 15 Oct 2009 11:33:20 +0000

Hi Paul, You already know IE8 does recalculate the #outer min-height if a child to it base its height on percent.
So in the case a clearer is needed, a :after clearing rule could replace the IE8 table display.

#outer:after {
clear:both;
display:block;
height:1%;
content:”";
}
As the parent height is auto, the 1% height would be none as the content is. Would such rule work reliably for IE8 min-height do you think?

By: Paul OB

Paul OB — Mon, 12 Oct 2009 09:36:03 +0000

Hi Erik,

Actually that works well for IE8 instead of the display:table so you could use either.

I usually avoid using the :after clearing mechanism on sticky footers because it introduces a space at the bottom in Firefox. However using the negative top margin method as shown above the gap doesn’t seem to appear.

This also raises another interesting point in that adding overflow:hidden to #outer kills the sticky footer effect in Opera.

Therefore to clear floats in the sticky footer version I would now advocate using the :after method instead of using overflow.

So perhaps building this :after method in from the start would be more reliable and avoid using the display:table for IE8 also.

By: Erik J

Erik J — Sun, 11 Oct 2009 09:46:46 +0000

Hi Paul, as you know alredy IE8 does also apply the #outer min-width if a child to it base its height on percent.
In the case a clearer is needed, an :after rule could replace the IE8 table display. As the parent height is auto, the 1% height would be none. Would such rule work reliably for IE8 do you think?

#outer:after {
clear:both;
display:block;
height:1%;
content:”";
}

By: Paul OB

Paul OB — Fri, 09 Oct 2009 18:27:06 +0000

Where did the code go

if !IE 7

By: Paul OB

Paul OB — Fri, 09 Oct 2009 18:24:52 +0000

Yes I could have done that (and not sure why I didn’t now)

I could have done this instead:

etc…..

= if not IE7

By: Dan Schulz

Dan Schulz — Fri, 09 Oct 2009 16:49:12 +0000

Hey Paul, just curious (even though I asked you on Skype, I thought I’d post it here for the record). Why not use a conditional comment that specifically excludes IE7 instead of targeting IE6- and IE8+?