WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > IE6 footer wont stay at the bottom when jQuery expands content..

Reply
  Thread Tools Display Modes
Old 15th January 10, 08:26 PM   #1
richholt
WLC Member
 
Join Date: Jan 2010
Posts: 2
Default IE6 footer wont stay at the bottom when jQuery expands content..

If anyone can solve this, I would honestly think you're a genius. I've been using html/css 10+ years and this has bugged me for days!

You can see the problem if you view http://www.dripsplat.com/dev/ttass/courses.php and click the "course outline" link to expand content. Content expands but footer stays where it was originally.

I've tried all sorts of footer positioning techniques, but IE6 has troubled me far too much. It works fine in all other browsers!

Any help would be hugely appreciated!

Basic layout is done by

<container>
<header>
<content>
<footer>
</container>

I understand the current method is using padding-bottom on the #content div which is the value of the footer height and that IE6 doesn't play well with padding.
richholt is offline   Reply With Quote
Old 15th January 10, 09:38 PM   #2
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: IE6 footer wont stay at the bottom when jQuery expands content..

Hi,
You are kinda using a sticky footer here with the exception of absolute positioning on your footer. I see you targeted IE<7 with your internal stylesheet for min-height:100%.
Code:
	<!--[if lt IE 7]>
	<style media="screen" type="text/css">
	#container {
		height:100% !important;
		height: auto;
	}
That min-height method also causes problems with IE7 and it is best to target IE6 only with height:100%;
IE7 supports min-height so it can get the proper code from your main css styles.

Code:
* html #container{height:100%}/*min-height for ie6*/
IE6 seems to be having problems with that AP footer and I have heard about it before. That is why the Sticky Footer Method with a static footer is always recommended.

You will see that it works for IE6 when you remove the absolute positioning and lift the footer back up with a negative margin.

Code:
#footer{
	 clear:both;
	 position:relative;
	 margin-top:-160px;/*lift into #content bottom padding*/
	 width: 100%;
	 height: 160px;
	 background-color: red;/*#3c3f48;*/
	 background-image: url(../images/footerShadow.gif);
	 background-position: top;
	 background-repeat: repeat-x;
}
But, you really need to set the footer outside of the #container div in the html for it to be a true sticky footer. The fix I gave above only works when there is enough content in the <div id="content"> to push the page down.

Have a look here and view the source code.
http://www.css-lab.com/demos/stickfoot/stickfoot-1.html

You will see that the footer sits outside of the wrapping div and then it is pulled into the content bottom padding with a negative margin.
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 16th January 10, 03:56 PM   #3
richholt
WLC Member
 
Join Date: Jan 2010
Posts: 2
Default Re: IE6 footer wont stay at the bottom when jQuery expands content..

Thank you very much, this worked a treat!

Can never stop learning.
richholt is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:20 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.