SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with sticky footer that is not sticking to bottom

    When you resize the window and scroll, the footer does not stay.

    http://www.nvcc.edu/home/ssuh/footer3/index4.html

    I tried using ryanfait's http://ryanfait.com/sticky-footer/layout.css, but it was a no-go. Can anyone assist? Thanks!

    I feel like the problem has something do with my two wrapper divs. If you resize the window from the bottom, the footer works correctly until it hits "My recent topics."

    #footer {

    width: 918px;
    position: relative;
    margin: 0 auto;
    background:url(footer-bg2.png) repeat-x top left;
    border-top: solid 1px #999;

    height: 30px;
    }

    #parature_wrapper { /* wrap all of the content */
    width: 960px;
    margin: 0 auto;
    position: relative;
    background: url(topheader.png) no-repeat top left /* nova logo + financial aid support center text + gradient background image */;
    height: auto;
    min-height: 850px;


    }
    #parature_content { /* Main Page Content goes here. Left KB nav is included. */
    position: absolute;
    top: 166px;
    right: 20px;
    width: 630px;
    background:url(content-bg.png) repeat;
    font-size: 1.1em;
    /*height: 5000px; */
    padding-top: 20px;
    padding: 20px;

    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What problem is it that you think you have exactly?

    Ryan Fait's sticky footer is pretty broken in a lot of browsers but it does seem to be working as would be expected in the browsers that it does work in.

    Are you thinking that a sticky footer is something different to what it is?

    A sticky footer is a footer that sits at the bottom of the viewport when the content on the page is small but sits at the bottom of the document when the content extends below the fold. It is not a fixed positioned footer that always sits at the bottom of the viewport. These are entirely different things.

    We'd need to know what you expect and if you were expecting a sticky footer then we'd need to know where you are seeing it got wrong and in what browser. Ryan Fait's sticky footer is buggy in IE7/8 and opera so have a look at the CSS faq (see my sig) for the real version that works everywhere.

    If you wanted a fixed positioned footer then that's another story altogether

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul, i was able to update it and get it working. the push class did not have the correct height assigned to it.

    my intent was having it work like Ryan's demo page. i think it's working correctly now in ie 7-9, chrome, firefox http://www.nvcc.edu/home/ssuh/footer3/index4.html , i'll need to double check opera.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks like opera is not working correctly. i will check your faq.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by allistar343 View Post
    hi paul, i was able to update it and get it working. the push class did not have the correct height assigned to it.

    my intent was having it work like Ryan's demo page. i think it's working correctly now in ie 7-9, chrome, firefox http://www.nvcc.edu/home/ssuh/footer3/index4.html , i'll need to double check opera.

    Hi,

    Glad you realised the issue but as I said above Ryans footer (and his demo) don't work in IE7, 8 and opera and neither does yours. As the inventor of the original sticky footer back in 2003 I think I've tested many sticky footers and the only one that is more or less foolproof is the one l have listed in the FAQ (and doesn't really need a push div either for most uses).

    Ryans (and your) footer gets stuck in the middle in IE7 8 and opera when you resize the screen form the bottom and then open it up again. The footer does not hug the bottom like it should.

    You also have a logic error here:

    Code:
    #parature_content {    	/* Main Page Content goes here. Left KB nav is included. */
    	position: relative;
    	top: 165px;
    	left: 270px;
    	width: 630px;
    	background:url(content-bg.png) repeat;
    	font-size: 1.1em;
    	padding: 20px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    }
    That element already sits inside a min-height:100% element so you cannot base another element on min-height and therefore would collapse to zero in good browsers. However some browsers may try to help you out and you will get another 100% + 165px in height due the relative positioning you added. You can't add anything to 100% as 100% is the max otherwise you have an element that is always too big for the container it sits in. Suffice to say the inner element should have all the 100% rules removed as CSS just doesn't work like that.


    Lastly this rule:
    Code:
    min-height: 100%;
    	height: auto !important;
    	height: 100%;
    That's the rule that kills IE7 and stops the footer being sticky. The code is correct but its an obscure bug that I have documented many times and causes IE7 to fail. The height:100% rule for IE6 should be in a separate ie6 only rule and then the important declaration can be removed and IE7 will work.

    e.g.

    Code:
    html,body{
    margin:0;
    padding:0;
    height:100%;
    }
    #outer{min-height:100%}
    * html #outer{height:100%}

    It's actually less characters to write:

    Code:
    #outer{min-height:100%}
    * html #outer{height:100%}
    Than it is to write:

    Code:
    #outer{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }
    But what's more important is that the former works in IE7 without problem.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Here's three screenshots showing your footer broken in Opera and IE8.
    Attached Images Attached Images

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, a nice thorough post! i will modify mine according to your faq.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just made edits according to your faq. http://www.nvcc.edu/home/ssuh/footer4/index4.html

    it doesn't seem to push past one of the divs on the bttomo. i set the margin-top: -40px on the wrapper div but i have a bg image on that div and it's hiding the image.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you have moved #parature_content using relative positioning and relative positioning doesn;t actually move anything physically. It just moves it visually but the element remains in the same place it always was as far as everything on the page is concerned. This means that the top:165px you added to it will create a gap of 165px and content will overlap the element by 165px. Relative positioning isn't meant for structural layout but for more subtle effects than that. You should use margins instead but you will have to take care of collapsing margins at the same time.

    e.g.
    Code:
    #parature_wrapper {
    	min-height:100%;
    	margin-bottom:-41px;
    	padding:1px 0 0;/* stop margin-collapse*/
    }
    
    #parature_content {    	/* Main Page Content goes here. Left KB nav is included. */
    	position: relative;
    	margin-top: 165px;/* not top:165px*/
    	left: 270px;
    	width: 630px;
    	background:url(http://www.nvcc.edu/home/ssuh/footer4/content-bg.png) repeat;
    	font-size: 1.1em;
    	padding: 20px;
    }
    However as you have used a bottom margin on the wrapper instead of a top margin as in my example then you will have to use the push div again and give it a height to match the footer.

    In my example I use a negative margin-top on the wrapper but then I fill the gap with a top border on the first element on the page. In your page you have strangely placed an absolute element as the first on the page which makes that approach awkward and indeed is the reason that you moved the next element with relative positioning. Why didn't you leave the element in the flow and not absolutely place it and then you wouldn't have needed to move the element below by 165px?

    One final point is that you have placed your left column absolutely and therefore the sticky footer (or indeed any normal footer) will take no notice of it whatsoever and if the left column is longer than the main content then the footer will overlap. For a two column layout you should have used two floats and then cleared then to regain the flow for the footer.

    Hope that makes sense

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks!

    i made your updates using margin-top.

    http://www.nvcc.edu/home/ssuh/faid/

    The reason I used absolute position is because the div for the left navigation is inside of the div content container. The div content container uses that gradient background also. I want that gradeitn background to scale as the container gets bigger.


    We're using another vendor product so I can't really move divs around. Am I still able to accomplish this with a float?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by allistar343 View Post

    We're using another vendor product so I can't really move divs around. Am I still able to accomplish this with a float?
    If you can't move the html then you are stuck using the absolute positioning for that left column. Just make sure that the main right column has a min-height set that is longer than the left column and then you should be ok.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you can't move the html then you are stuck using the absolute positioning for that left column. Just make sure that the main right column has a min-height set that is longer than the left column and then you should be ok.
    should i set the min-height on the main right column to the size of the background image?

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrollbars.

    I seem to get a scrollbar on the right. Changing the margin to 40px doesn't remove it.

  14. #14
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've worked with Paul's Sticky Footer, and I have been happy with it: http://www.search-this.com/2009/10/0...ticky-subject/

    It's simple and works everywhere. Thanks Paul.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by allistar343 View Post
    I seem to get a scrollbar on the right. Changing the margin to 40px doesn't remove it.
    The right vertical scrollbar will be present due to the min-height:100% and the 1px padding I added to stop the margin collapse because of the way that section was structured. Without changing it all around again you could probably use min-height:99.9% instead.
    Code:
    #parature_wrapper {
        margin-bottom: -40px;/* adjust until footer sits on bottom*/
        min-height: 99.9%;
    }
    It won't be a perfect fit though because of the 99.9% height.

    A lot of people actually use the height:100% + 1px padding in order to force the vertical scrollbar so that you don't get the centring jump when it appears.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdt76 View Post

    It's simple and works everywhere. Thanks Paul.
    Glad you liked it

  17. #17
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    thanks Paul. Two thumbs up! You can be my css-wingman any day!

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by allistar343 View Post
    thanks Paul. Two thumbs up! You can be my css-wingman any day!
    lol - cheers

  19. #19
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm getting an issue with collapsing margin in ie7:

    http://www.nvcc.edu/home/ssuh/faid/page4.html

    tried setting width and clear

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try this:
    Code:
    *+html #parature_content{	float:left}

  21. #21
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul: that worked for me in ie7! thanks.

    do you have any expereicne with iframes? It keeps breaking my yui navigation intermittently on IE.

    see - http://www.sitepoint.com/forums/show...78#post4976778

  22. #22
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by allistar343 View Post
    hi paul: that worked for me in ie7! thanks.

    do you have any expereicne with iframes? It keeps breaking my yui navigation intermittently on IE.

    see - http://www.sitepoint.com/forums/show...78#post4976778

    *sigh* I see another problem in the ipad 2 browser. The main bg image is not being scaled properly and it doesn't take up the full size.

  23. #23
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok got it fixed. used - a css rule to target the ipad.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you solved the ipad issue and no I don't get involved with iframes so I won't be much use there


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •