Grow your CSS skills. Land your dream job.

Footer too low

  • # October 31, 2008 at 2:33 am

    I’ve spent all day trying to get the site I’m working on to look okay in Firefox and IE. No matter what I’ve tried I can’t work out how to get the footer to sit in the coloured background in either browser. Here’s the site: http://www.peacefulwillow.com/hangout/

    I tend to work things out as I go along with css but this has me stumped.

    Here’s my css:

    Code:
    /* Global Style */

    body {
    margin-top:10px;
    padding:0;
    height:100%;
    font-size:8pt;
    font-family:arial,sans-serif;
    background:#695E49;
    color:#232323;
    }

    h1 {
    color:green;
    font-size:10pt;
    text-align:left;
    }

    h2 {
    color:#000000;
    font-size:10pt;
    text-align:left;
    }

    p {
    line-height:1.2em;
    text-align:left;
    }

    .center {
    text-align:center;
    }

    .justify {
    text-align:justify;
    }

    hr {
    height:1px;
    color:#695E49;
    border-color:#695E49;
    }

    li {
    margin: 0;
    padding: 0;
    }

    blockquote {
    margin-left: 40px;
    color:#660066;
    }

    a:link {
    color:#002B74;
    text-decoration:none;
    }

    a:visited {
    color:#002B74;
    text-decoration:none;
    }

    a:hover {
    text-decoration:underline;
    }

    a:active {
    text-decoration:underline;
    }

    /* Structure and minor style */

    #wrap {
    position:relative;
    margin:0 auto;
    padding:0;
    width:759px;
    border:0;
    background:#ffffff;
    }

    #container {
    margin: 0px auto;
    padding:1em;
    min-height:500px;
    height:auto !important;
    height:500px;
    }

    #topadvert {
    margin-bottom:10px;
    padding:0;
    width:100%;
    height:80px;
    }

    #top {
    margin:0;
    padding:0;
    width:100%;
    height:255px;
    background:url(/hangout/images/hangban1.jpg) no-repeat;
    }

    #left {
    width:155px;
    padding-right:8px;
    float:left;
    }

    #content {
    margin:0;
    padding:0;
    width:570px;
    float:right;
    }

    #indexleft {
    width:155px;
    padding-right:8px;
    float:left;
    }

    #indexright {
    width:235px;
    padding-left:10px;
    float:right;
    }

    #indexcenter {
    margin-left:165px;
    margin-right:245px;
    }

    #navcontainer ul {
    margin: 0;
    padding: 0;
    font-size: 9pt;
    list-style-type: none;
    }

    #navcontainer li { margin: 0 0 .3em 0; }

    #navcontainer a {
    display: block;
    color: #FFF;
    background-color: #695E49;
    width: 10em;
    padding: .2em .8em;
    text-decoration: none;
    }

    #navcontainer a:hover {
    background-color: #D4CAB6;
    color: #FFF;
    }

    #bluefeature {
    margin:0px;
    padding:4px;
    height:100%;
    background:#E3E3FD;
    }

    #pinkfeature {
    margin:0px;
    padding:4px;
    height:100%;
    background:#FFD9EC;
    }

    #brownfeature {
    margin:0px;
    padding:4px;
    height:100%;
    background:#CCC1AA;
    }

    #bot {
    margin:0;
    padding:0;
    height:35px;
    clear:both;
    font-size:90%;
    background:#BAAB8B;
    }

    #bot p {
    text-align:center;
    color:#fff;
    }

    #bot a {
    text-align:center;
    color:#fff;
    text-decoration:underline;
    }

    #support {
    margin:0;
    padding:0;
    text-align:center;
    background:none;
    }

    #google {
    margin-top:0;
    padding:5px;
    text-align:center;
    background:none;
    color:#000
    }

    # October 31, 2008 at 2:44 am

    well you have a height of 35px on the id="bot" which you have attached to your footer. You also have far more code in the bot div that makes it much larger than 35 pixels. I would try moving the footer div up below the actual footer and move the google div below that. something like this

    Code:

    

    “The Hangout” is a Youth Intiative brought to you by Peaceful Willow

    Copyright © 2008 Peaceful Willow. All rights reserved | Terms of Use


    This site looks best in… This site looks best in Firefox



    # October 31, 2008 at 2:56 am

    Thanks for the quick reply. I actually had an idea after I made my post and it worked…you wouldn’t believe ti!

    I added margin:-9px to the footer’s p coding instead of the footer itself…

    #bot p {
    margin-top:-9px;
    padding:3px;
    text-align:center;
    color:#fff;
    }

    It sits well now. Do you think I should still change it to the way you mentioned…e.g would that be a better solution overall?

    # October 31, 2008 at 11:00 am

    if it works that is great, i would still change it to my suggestion due to the simple fact that it makes better code. That way anyone coming along in the future won’t have to try and figure out how you got it working.

    # November 8, 2008 at 5:37 pm

    Thanks a lot for that. :D I’ve changed it because I prefer to have the coding done the right way if I can help it.

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

You must be logged in to reply to this topic.

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