[themes] IE7 + sticky footer + Navigation = problems

[brendan, fresh-off.com]

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 at drupal.org [mailto:themes-bounces at 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?

 

 

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.drupal.org/pipermail/themes/attachments/20100302/cb608764/attachment-0001.html