Grow your CSS skills. Land your dream job.

CSS Footer Problem!! Please help me.

  • # July 30, 2008 at 4:27 pm

    Hello Guys,

    I have a new website sitegorilla.com, which at the moment is closed to the public. I have a problem with my footer, on short pages the footer doesnt stay at the bottom, but on long pages it is where it should be.

    Here is my CSS for the footer and other important parts:

    Code:

    html {
    min-width: 954px;
    }

    body {
    background-image: url(images/page-bg.png);
    background-repeat: repeat-x;
    margin: 0;
    FONT: 75%/150% “Trebuchet MS”, “Lucida Grande”, “Bitstream Vera Sans”, Arial, Helvetica, sans-serif;
    COLOR: #666;
    TEXT-ALIGN: center;
    background-color: #333333;
    background-position: 100% 0px;
    }

    html, body {
    height: 100%;
    }
    * html #wrapper {
    height: 100%;
    }

    #wrapper {
    width: 954px;
    margin-top: 0px;
    height: 65px;
    min-height: 100%;
    }

    #wrap {
    width: 954px;
    margin-top: 0px;
    margin: 0px auto 0px;
    position: relative;
    min-height: 100%;
    }

    * html #wrap
    {
    height: 100%;
    }

    #wrap2 {
    WIDTH: 954px;
    TEXT-ALIGN: left;
    padding-top: 20px;
    }

    #top {
    margin-top: 8px;
    width: 954px;
    }

    #footer {
    border-top: #fff 0px solid;
    display: block;
    font-size: 8pt;
    background-image: url(images/footer.png);
    margin: 0px;
    color: #ffffff;
    height: 50px;
    text-align: right;
    padding: 10px 5px 0px 5px;
    vertical-align: middle;
    position: relative;
    background-color: #ffffff;
    }

    #footer1 {
    width: 690px;
    margin-bottom: 10px;
    margin-top: 0px;
    }

    #footer2 {
    width: 690px;
    margin-bottom: 10px;
    border-top: #858585 solid 1px;
    position: absolute;
    top: 530px;
    }

    #footer123 {
    text-align: left;
    font-size: 10px;
    color: #919191;
    padding-left: 8px;
    }

    .footerlink {
    color: #00c1c1;
    text-decoration: none;
    }

    .footerlink:hover {
    color: #666666;
    text-decoration: underline;
    }

    .footerlink1 {
    color: #00c1c1;
    text-decoration: underline;
    }

    .footerlink1:hover {
    color: #666666;
    text-decoration: underline;
    }

    and this the format of my page:

    Code:

    About Us
    Text here

    Thank you for your help.

    Adam

    # July 30, 2008 at 4:30 pm

    Chris posted a link in this article that might help you. I haven’t tried it myself, but it looks like a solid solution.

    # July 30, 2008 at 5:03 pm

    I would be really grateful if somebody could apply it to my css file and show me how to format the page, I have tried the tutorial already and haven’t managed (i am really bad at css)…

    Thanks sooo much

    Adam

    # August 2, 2008 at 1:40 am

    mmonice providerAOC Gold service. My favorite bottled sauce is Maull’s, out of St. Louis, and here are some ideas on how to doctor it. Start by simmering a bottle of sauce over low heat. Add 1/4 to 1/3 cup of cider vinegar or rice vinegar.AOC powerleveling A lot of people use Pepsi, which gives a sweet, caramel flavor. Add a tablespoon of granulated or fresh garlic. Throw in a little chili powder for an outdoorsy quality. Maybe add a tablespoon of Worcestershire sauce.Age of Conan Gold A tablespoon of butter or prepared mustard tastes good, too.
    Buy AOC Gold

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

You must be logged in to reply to this topic.

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