Hello Themers, Here's one for any of you IE sleuths. I'm working out the basic html for a new theme and attempting to use Sticky Footer ( http://www.cssstickyfooter.com/ ) . Except for IE7, I've got it working in all my test browsers (FF, Opera, Chrome, Safari, IE8.. I'm not supporting IE6).
Here's what happens in IE7:
First off, the IE7 problem only happens on long pages where the content extends below the viewport.
When the page is first loaded, the footer appears normally at the bottom of the sites content. However, as soon as you mouse over any of the navigation links in the navigation div (#navigation-div), the footer jumps "up" to the bottom of the browser window and covers the content.
It then stays in the same position if you scroll up or down the page.
Here's two pages where the footer jumps when I view it in IE7 with my screen size set to 1440x900 :
http://alpha.fresh-off.com/blog
http://alpha.fresh-off.com/contact
Any ideas on how to fix this, or what's going on?
---
brendan, fresh-off.com
Creative Direction & Consultation: Web | Print | Brand
hello@fresh-off.com
206.328.1067
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..
LOL, since I apparently can't use vertical margins OR padding with the sticky footer, hopefully to keep IE7 happy I don't have to resort to an oldschool "spacer.gif".. X-(
---
brendan, fresh-off.com
Creative Direction & Consultation: Web | Print | Brand
hello@fresh-off.com
206.328.1067
From: themes-bounces@drupal.org [mailto:themes-bounces@drupal.org] On Behalf Of brendan, fresh-off.com Sent: Monday, March 01, 2010 5:44 PM To: 'A list for theme developers' Subject: [themes] IE7 + sticky footer + Navigation = problems
Hello Themers, Here's one for any of you IE sleuths. I'm working out the basic html for a new theme and attempting to use Sticky Footer ( http://www.cssstickyfooter.com/ ) . Except for IE7, I've got it working in all my test browsers (FF, Opera, Chrome, Safari, IE8.. I'm not supporting IE6).
Here's what happens in IE7:
First off, the IE7 problem only happens on long pages where the content extends below the viewport.
When the page is first loaded, the footer appears normally at the bottom of the sites content. However, as soon as you mouse over any of the navigation links in the navigation div (#navigation-div), the footer jumps "up" to the bottom of the browser window and covers the content.
It then stays in the same position if you scroll up or down the page.
Here's two pages where the footer jumps when I view it in IE7 with my screen size set to 1440x900 :
http://alpha.fresh-off.com/blog
http://alpha.fresh-off.com/contact
Any ideas on how to fix this, or what's going on?
---
brendan, fresh-off.com
Creative Direction & Consultation: Web | Print | Brand
hello@fresh-off.com
206.328.1067
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?
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?
-
brendan, fresh-off.com -
Tony Crockford