Grow your CSS skills. Land your dream job.

Footer sick of being a footer

  • # July 23, 2011 at 10:21 am

    I’m 98% positive its a problem in my CSS but i’ve been staring at it for hours and playing with things and I cant fix it. Even though in my HTML I have content between the header and footer it [my footer] still sits just under the footer beneath the other content. I cant get it to move down and stay down.

    online @ http://www.vernc.com/onemillion

    stylesheet:

    Anyone see a problem??

    @charset "UTF-8";

    /* Fix up IE6 PNG Support */
    img, #logo { behavior: url(scripts/iepngfix.htc); }


    /* Background-Styles */

    body {
    background-color: #d9d9d9;
    margin: 0; padding: 0;
    font-family:Arial, Helvetica, sans-serif;
    color: #272625;
    font-size:13px;
    line-height:19px;
    }

    #main {
    background: url(../images/header-bg.jpg) no-repeat scroll center top #d9d9d9;
    height: 606px;
    margin-bottom: 10px;
    }


    .container {
    width:950px;
    min-height: 100%;
    margin:0 auto;
    position: relative;
    }

    #block_feature {
    height: 410px;
    padding: 20px;
    }

    #block_content {
    padding: 0 px;
    min-height: 100%;
    margin-top: 60px;
    }

    /*
    Text-Styles
    */

    h2 {
    margin:0px 0px 10px 0px;
    font-size:28px;
    font-family:Helvetica, Arial, Sans-serif;
    color:#272625;
    }
    small {
    color:#595856;
    font-weight:bold;
    font-size:11px;
    display:block;
    margin-bottom:15px;
    }
    a {
    color: #f4c116;
    text-decoration:none;
    }
    a:hover { text-decoration:underline; }
    p { margin: 0px 0px 15px 0px; }

    a.button {
    background:#32312f url(images/button_bg.jpg) repeat-x;
    padding:5px 10px 5px 10px;
    color: #ffffff;
    text-decoration: none;
    text-transform:uppercase;
    font-size:9px;
    line-height:25px;
    -moz-border-radius: 5px;
    }
    a.button:hover {
    background-color: #f4c116;
    border-color:#007de2;
    }

    /*header icons*/
    #logo h1 {
    margin:0px;
    display:block;
    text-indent:-9999px;
    }
    #logo {
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:374px;
    height:136px;
    }
    ul#menu {
    list-style-type: none;
    margin:0px;
    padding-top: 70px;
    padding-right: 10px;
    float: right;
    }
    ul#menu li {
    float:left;
    }
    ul#menu li a:link,a:visited {
    display:block;
    width:48px;
    height: 48px;
    padding-right: 20px;
    text-decoration: none;
    text-indent: -9999px;
    }
    ul#menu li a.twitter {
    background: url(../images/twitter.png) no-repeat;
    }
    ul#menu li a.facebook {
    background: url(../images/facebook.png) no-repeat;
    }
    ul#menu li a.youtube {
    background: url(../images/youtube.png) no-repeat;
    }
    ul#menu li a.digg {
    background: url(../images/digg.png) no-repeat;
    }

    /*
    Navigation
    */

    #nav{
    list-style:none;
    margin: 10px 0px 10px 0px;
    padding:0;
    text-align:center;
    font-family: Times, serif;
    font-size: 18px;
    }

    #nav li a.home {
    background: url(../images/nav-home.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.blog {
    background: url(../images/nav-blog.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.store {
    background: url(../images/nav-store.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.club {
    background: url(../images/nav-club.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.media {
    background: url(../images/nav-media.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.contact {
    background: url(../images/nav-contact.png) bottom left no-repeat;
    width: 104px;
    height: 52px;
    }

    #nav li a.search {
    background: url(../images/nav-search.png) bottom left no-repeat;
    width: 324px;
    height: 52px;
    }

    #nav li a:hover {
    background-position: top left;
    background-repeat: no-repeat;
    }

    #nav li{
    display:inline;
    }
    #nav a{
    display:inline-block;
    padding:0px 0px 0px 0px;
    text-indent: -9999px;
    margin-left: -6px;
    }


    /*
    Blog-Home-Styles
    */

    #block_blog {
    overflow:auto;
    margin-bottom:5px;
    padding-top: 0px

    }
    #blog_items {
    width:615px;
    margin-right:25px;
    float:left;

    }
    #text_column {
    float:right;
    width:310px;
    }
    #text_column h2#text_title {
    margin-top: 10px;
    line-height: 100%;
    }

    .mini_blog_item {
    margin: 30px 0px 50px 0px;
    }
    .mini_blog_item .block_inside {
    background:none; background-color:#e2dddc;
    padding: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    .mini_blog_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }


    /*
    Block-Styles
    */

    .ribbon {
    position:absolute;
    top:-33px;
    right:-3px;
    }

    .block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    margin-top: 45px;
    position:relative;
    }
    .block_inside {
    display:block;
    border:1px solid #ffffff;
    background: #ffffff url(../images/background_block_slice.png) repeat-x;
    padding:30px;
    overflow:auto;
    margin-top: -30px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    }

    .image_block {
    border:1px solid #b5b5b5;
    background-color:#d2d2d2;
    padding:5px;
    float:left;
    }
    .image_block img {
    border:1px solid #b5b5b5;
    }
    .text_block {
    float:left;
    width:400px;
    margin-left:30px;
    }



    /*
    Footer styles
    */

    #footer {
    background-image: url(../images/footer-slice.jpg);
    background-repeat: repeat-x;
    color: white;
    min-height: 160px
    }
    # July 23, 2011 at 10:40 am

    Problem solved. Misplaced

    tag. Blasted tags.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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