Grow your CSS skills. Land your dream job.

[Solved] Sticky Footer Causing Problems

  • # November 7, 2009 at 1:20 pm

    Hi all,

    I wonder if anyone could have a look at my css code as i’ve tried to add the sticky footy from this site. It works with chrome and firefox but leaves a massive gap with ie8.

    here’s the site
    http://speedway-stats.99k.org/

    here’s the css

    Code:
    * {margin: 0;}

    html, body, #wrap {height: 100%;}

    body > #wrap {height: auto; min-height: 100%;}

    #header
    {
    width:99%;

    padding-left: 0em;
    padding-top: 0em;
    }

    h3{font-family: arial;
    font-size: 18px;
    font-style: bold;}

    h4{font-family: arial;
    font-size: 12px;}

    h5{font-family: arial;
    font-size: 16px;
    font-style: bold;}

    p.cont{
    font-size: 12px;
    font-family: Arial;}

    a{text-decoration: none;
    font-color:blue;}
    a:link{text-decoration: none;}
    a:visited{text-decoration: none;
    font-color:blue;}
    a:active{text-decoration: none;}
    A:hover{text-decoration: underline;}

    #container{
    width: 80%;
    margin: 0px auto;
    background-color: #fff;
    line-height: 130%;
    padding-bottom: 30px;} /* must be same height as the footer */

    #top{
    width:99%;
    padding-left: 0em;
    padding-bottom: 0em;
    background-color: white;
    border-bottom: 3px;
    border-color:#e60;
    border-bottom-style:solid;}

    #topper{
    width:99%;
    padding:1em;
    background-color: white;}

    #top h1
    {
    padding: 0;
    margin: 0;
    }

    #leftnav
    {
    float: left;
    width: 160px;
    margin: 0px;
    padding: 1em;
    }

    #rightnav
    {
    float: right;
    width: 160px;
    margin: 0;
    padding: 1em;
    }

    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    margin-right: 200px;
    border-right: 0px solid gray;
    padding: 1em;
    max-width: 36em;
    padding-bottom: 3em;
    }

    #footer
    {
    position: relative;
    margin-top: -30px; /* negative value of footer height */
    height: 30px;
    clear:both;

    padding-top: 0.5em;
    padding-left: 1em;
    width:99%;
    background-color: #ddd;
    border-top: 1px solid gray;
    }

    .clearfix:after {content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    # November 7, 2009 at 1:49 pm

    OOh errr,

    Seems to be ok now, looks like the html <!–xxxxx—-!> was the problem. Wierd.

    Would still appreciate any critique.

    Ian

    # November 7, 2009 at 1:51 pm

    Pretty hard to see what you are trying to achive. Do you really want a horizontal scrollbar?
    Start by fixing all the errors on the page http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fspeedway-stats.99k.org%2F

    # November 7, 2009 at 4:18 pm

    How do i get rid of the horizontal scroll bar, i can’t see anything obvious

    # November 7, 2009 at 5:53 pm

    Change

    Code:
    #topper {
    background-color:white;
    padding:1em;
    width:99%;
    }

    to

    Code:
    #topper {
    background-color:white;
    padding:1em 0;
    width:99%;
    }

    You can set all those 99%’s to 100’s as well if you like.

    # November 8, 2009 at 4:46 am

    I’m afraid that hasn’t cracked it.

    ian

    # November 8, 2009 at 6:22 am

    Take the left-padding off the footer too.

    # November 8, 2009 at 7:46 am

    Cracked it, thanks very much

    ian

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

You must be logged in to reply to this topic.

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