Forums

  • # 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: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?

    # 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 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag