I don't know Tony. unless I've made a typo somewhere, the .clearfix code hasn't been altered from the original source @ http://www.cssstickyfooter.com/.
Here it is:
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Taking out the padding in #navigation-div seems to work in all my test browsers (IE 7/8, FF, Opera, Safari and Chrome). The future plans for #navigation-div are to float the navigation links to the right, use image replacement with the site name to insert a logo, and probably add a background image to then entire div.
I still don't really have a good solution for vertically placing elements inside of #navigation-div . Both elements I need to place are links, and if vertical padding is applied to either the elements or the div itself, the footer starts jumping again. =(
From: themes-bounces@drupal.org [mailto:themes-bounces@drupal.org] On Behalf Of Tony Crockford Sent: Tuesday, March 02, 2010 2:44 PM To: A list for theme developers Subject: Re: [themes] IE7 + sticky footer + Navigation = problems
On 2 Mar 2010, at 22:33, brendan, fresh-off.com wrote:
I *believe* I figured it out. The sticky footer site says to use padding to increase vertical height: "Instead use padding to create spacing inside the element."
I was using
padding: 1em 0 1em 0;
to create some vertical spacing in the navigation div. I guess IE7 was allergic to that..
are you sure it's not the .clearfix on the #main div that's interfering with the sticky footer?