Grow your CSS skills. Land your dream job.

Footer issues

  • # March 1, 2010 at 12:59 pm

    Hi,

    I have a 2 – 5 px gap at the bottom of my footer, depending on the browser. This lets a background image show through, which I don’t want.

    I’m not sure if this is related to a negative margin I set on a "ul class=legal_notice" or if I messed something else up entirely.

    Would someone mind taking a look at http://dev.craigcurry.com?

    Some possibly relevant code:

    Code:
    #footer {
    background: #730707 url(../images/interface/2010_footer_bg.jpg) no-repeat;
    height: 215px;
    width: 960px;
    margin: 0 auto;
    color: #730707;
    font-size: 1.4em;
    }
    #footer ul {
    list-style: none;
    width: 960px;
    float: left;
    }
    #footer ul.footer_nav {
    float: left;
    width:480px;
    margin: 0;
    margin-top: -126px;
    margin-left: 260px;
    }
    #footer ul.footer_nav li, #footer ul.legal_notice li {
    float: left;
    }
    #footer ul.footer_nav li a:hover {
    background: url(../images/interface/footer_nav_bg.png) bottom center no-repeat;
    height: 50px;
    overflow: hidden;
    }
    #footer ul.footer_nav a {
    font-size: 1em;
    height: 50px;
    overflow: hidden;
    }
    #footer ul.footer_nav li a.active.home, #footer ul.footer_nav li a.active.about, #footer ul.footer_nav li a.active.recordings, #footer ul.footer_nav li a.active.blog, #footer ul.footer_nav li a.active.contact, #footer ul.footer_nav li a.active.piano, #footer ul.footer_nav li a.active.tutorials, #footer ul.footer_nav li a.active.choral, #footer ul.footer_nav li a.active.shop {
    color: #121b61;
    font-weight: bold;
    display: block;
    height: 50px;
    overflow: hidden;
    }
    #footer ul.legal_notice {
    float: left;
    width:300px;
    margin: -18px 0 0 395px;
    }
    #footer a {
    font-size: .8em;
    color: black;
    text-decoration: none;
    float: left;
    display:block;
    padding: 2px;
    }
    # March 1, 2010 at 2:12 pm

    Remove the height from your quick links lists.

    # March 1, 2010 at 2:34 pm

    Thanks. That did the trick for everything except IE7. There I have a 2px gap at the top of the footer and about a 4px gap at the bottom. (?)

    # March 1, 2010 at 6:35 pm

    I’m using Firefox on a Mac and it looks fine. One thing I’m not seeing in your code is:

    Code:
    *footer {
    bottom: 0 !important;
    }

    I’ve used this to force a footer to the bottom of the page. Why not give it a try?

    # March 1, 2010 at 7:07 pm

    Thanks… tried it, but that didn’t work.

    # March 2, 2010 at 1:31 am

    Hmm. Did you reset at the top of your CSS file?

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    # March 2, 2010 at 1:01 pm

    Yes, tried it with the reset also.

    I did get rid of the gap at the top of the footer with:

    Code:
    #footer {margin:-3px 0 0 0;}

    in the conditional stylesheet.

    But no luck with the gap at the bottom.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".