SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: Footer RWD

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer RWD

    Hi all

    I have created my first responsive layout with HTML 5 and CSS and all is good except in Firefox and IE 9 I cannot get the footer to stay down, it's fine in chrome. Can anyone tell me the best way to sort this please in css?

    Kind regards

    rob

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotta see some code, preferably on a live site.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ron Roe View Post
    Gotta see some code, preferably on a live site.
    Apologies for the delayed reply. Here is my CSS and markup below for the footer, hope this helps

    #footer {
    clear: both;
    /*background: #0f3d48; */
    background: #302f2b;
    font-size: 85%;
    height:200px;
    border-top: 2px #ffc21f solid;
    }

    .footerContent{
    margin: 0 auto 53px;
    width: 93.75%; /* 900px / 960px */
    color: #ffdd6b;
    }
    .footerCopyRight{
    margin: 12em auto;
    width: 93.75%; /* 900px / 960px */
    color: #ffdd6b;
    }


    <footer id="footer">
    <div class="footerContent">

    </div>
    <div class="footerCopyRight">
    <p>&#169; Yellow Belly Designs. All rights reserved.</p>
    </div>
    </footer>


    Kind regards

    Rob

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What exactly do you mean by "won't stay down"? If you mean that the area above it is collapsing, and the footer is inside it, you'll have to clear floats before the footer.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ron Roe View Post
    you'll have to clear floats before the footer.
    clear: both on the #footer should do that, but perhaps for IE9 the footer also needs display: block, as it's not necessarily recognized by IE9 (I can't remember).

    If this doesn't help, let us see the page, or a full working example, as these things only make sense in the context of the whole page.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    clear: both on the #footer should do that, but perhaps for IE9 the footer also needs display: block, as it's not necessarily recognized by IE9 (I can't remember).

    If this doesn't help, let us see the page, or a full working example, as these things only make sense in the context of the whole page.
    Thanks Ron and Ralph.m I will try that when I get back later, in the mean time this is the web page, its a made up portfolio I am creating.

    http://www.lrpdesigndetailing.com/myportfolio/

    Kind regards

    Rob

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Your footer looks the same in all browsers to me, including FF and IE9. I do see some other problems, though, such as in the code below. You need to use a comma instead of a colon here:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    Also, your body background image is failing in Chrome, because you have included quote marks around the URL path, so remove those:

    Code:
    background-image:url('images/kindajean.png');

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The footer is "rising" in Firefox because of some creative copyright code.

    Give the margin-bottom a zero...

    newstyle.css Line 290
    Code:
    .footerCopyRight {
        color: #FFDD6B;
        margin: 12em auto 0;
        width: 93.75%;
    }
    PS: I didn't see a problem in Chrome. The quote marks shouldn't be causing a problem, though. They're good things.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The footer is "rising" in Firefox because of some creative copyright code.

    Give the margin-bottom a zero...

    newstyle.css Line 290
    Code:
    .footerCopyRight {
        color: #FFDD6B;
        margin: 12em auto 0;
        width: 93.75%;
    }
    PS: I didn't see a problem in Chrome. The quote marks shouldn't be causing a problem, though. They're good things.
    Excellent thanks I will try that out later, yeah Chrome is fine it was Firefox and IE that I could not stop the footer from rising in.

    Thanks

    Rob

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You're quite welcome. Being able to see live code always helps the troubleshooting process.

    Cheers!

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Did you see my comments above?

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph.m

    My apologies I don't know how I missed your comment above as well, our internet connection went down this morning and my page was not refreshing properly so I must have missed it. Thanks I will check that out later too, did not realise I had made those mistakes. Thanks for pointing that out.

    Kind regards

    Rob

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rredford View Post
    Hi Ralph.m

    My apologies I don't know how I missed your comment above as well, our internet connection went down this morning and my page was not refreshing properly so I must have missed it. Thanks I will check that out later too, did not realise I had made those mistakes. Thanks for pointing that out.

    Kind regards

    Rob
    Hi Ron and Ralph

    Thanks for all your help, I added what you recommended and it worked. Thanks very much

    Kind regards

    Rob

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I didn't see a problem in Chrome. The quote marks shouldn't be causing a problem, though. They're good things.
    Yes, they aren't supposed to be an issue, but removing them did fix the background issue in Chrome for Mac, so I figured I should recommend it.

    Quote Originally Posted by rredford View Post
    Thanks very much
    Glad you've gotten the result you need. See you later!

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    {clear:both} in #footer fixed the problem in Chrome and Opera.
    Firefox needed .footerCopyRight {margin-bottom:0}, also.

    I cannot replicate any situation where any presence or absence of quote marks causes the dark footer to rise away from the bottom of the page. Back-ticks (or some mis-mark) will (of course) take away the background-image for the page.... Is that what you were seeing?... was the background-image missing?

    If you can replicate it again, I would like to see it. To me, the association between the background-image and the footer is illogical.

    There aren't too may things that I feel very confident about any more, but the value of quotes around a path (in the world of html, anyway) lingers... hasn't gone away. Quotes around a path are never a bad thing; always good. The absence of quotes can lead to a missing target if there is a space in the path.

    If someone knows otherwise, PLEASE CLUE ME IN!!!

    To quote a famous person... "Wee-uud".

    (I will guess that my the time I joined the thread, the OP had already deleted the quotes and added {clear:both}. Just so happens I use Firefox most of the time, so I still saw a problem.)

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I cannot replicate any situation where any presence or absence of quote marks causes the dark footer to rise away from the bottom of the page.
    No, the quote marks were causing the body background image not to appear at all in Chrome. (So, an unrelated issue that I suggested fixing. See post #7.)

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Yes, you said "body background-image". I misunderstood. Still, I can't duplicate a problem with quotes around the background image path in Chrome on the PC. Oh, well. Another browser mystery. I seem to be accumulating a list of those little buggers... browser inconsistencies.

    Sorry, Ralph. I'm not trying to be argumentive. I'm trying understand how things work and to avoid confusion.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    Sorry, Ralph. I'm not trying to be argumentive. I'm trying understand how things work and to avoid confusion.
    No problem at all. The idea of you trying to figure out why quote marks around a bg url was causing a footer problem was funny, that's all (that would be a real hair tearer! ). I'm not sure why Chrome Mac was having troubles either, but as you say, just another bug to watch out for.


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
  •