Grow your CSS skills. Land your dream job.

What would all the possible reasons be why your footer wont show up?

  • # April 22, 2011 at 4:38 am

    I’m really new with webdesign so it’s expected that I’m lost. I am nearing close to the end of my design, this of course doesn’t count debugging or anything like that. But I am now trying to put in my footer, but nothing is coming in. The only thing coming in is my text from the footer, and even that is not in the right place.

    I made sure to do the clear: both; command in my footer. But it’s still not showing up. I tried adding the float:bottom option but that does nothing either.

    The file name and file format is correct as well for my footer, checked it many times over.

    Here is my html

    div id="footer">

    Copyright © 2010 company name | Privacy Policy



    Home /
    About /
    Our Services /
    Portfolio /
    Blog /
    Contact Us








    And than here is some of the css for this specific div.

    #footer {
    clear: both;
    background: url(../images/footer.jpg);
    height: 100px;
    width: 100%;
    margin-top: 40px;
    float:bottom;
    }

    #footerContainer {
    margin: 0px auto 0;
    width: 960px;
    font-size: 12px;
    color: #ddd;
    padding-top: 20px;
    position: relative;
    float:bottom;
    }


    #footerContainer p {
    margin: 8px 0 8px;
    }
    #footerContainer a {
    color: #ddd;
    text-decoration: none;
    }
    #footerContainer a:hover {
    text-decoration: underline;
    }

    form#newsletter {
    position: absolute;
    right: 0;
    top: 20px;
    width: 300px;
    }
    form#newsletter label {
    font-weight: bold;
    color: #fff;
    }
    form#newsletter input {
    background-color: #fff;
    border:1px solid #ddd;
    color: #666;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 0 0;
    padding: 8px;
    width: 190px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    }

    form#newsletter input.btn {
    width: auto;
    border: none;
    padding: 0;
    margin-left: 3px;
    }

    Any ideas on what the issue could be?

    # April 22, 2011 at 7:18 am

    One issue is your code isn’t semantic and pieces of it are certainly not correct. Float:bottom? Do you have a link?

    # April 22, 2011 at 8:01 am

    Yeah I realize it isn’t, I intend to go through it all to see what is needed and what isn’t. But like I said I’m pretty new, and just pretty much trying a few things to see if I could get something to do something.

    I don’t have any link, no.

    # April 22, 2011 at 8:13 am

    I would take a few days to do a crash course with CSS and HTML. Video tutorials might also help so here is one…

    http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

    # April 22, 2011 at 9:50 am

    I was actually following a tutorial from net tuts to build this site. And came this far, all I need is the footer, add in links and my site will be pretty much done. I need to know what the issue is with this code and why I cant get the footer in.

    # April 22, 2011 at 10:11 am

    If you got this from nettuts, why would you have improper CSS? Especially like a bottom float? Also, not sure if you forgot an opening tag when you copied or not but make sure to have that at the beginning of your div.

    div id="footer">

    HTML
    You need to have an unordered list and list items before your anchor tags.
    e.g.

    CSS
    Get rid of the bottom float as it does not exist.

    float:bottom;

    Add these prefixes to border-radius

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    I would really need a link to check for any visual errors beyond this.

    # April 22, 2011 at 10:42 am

    The only reason I messed around with the code, when I did exactly what the tut said to do the footer still wasn’t there. I cant help but think that this has something to do with some other code that messed something else up.

    link to a screenshot.

    # April 22, 2011 at 4:38 pm

    First of all clean up the code:




    HTML:

    div id="footer"> change to

    Now see if it works better!

    # April 22, 2011 at 7:14 pm

    Nothing at all changed from making those changes, still looks the same.

    # April 22, 2011 at 9:26 pm

    Your problem is probably coming from the html and/or css before the footer, because your screen shot does show the footer (without background image), but not in the right place.
    It is difficult to help without seeing the code.

    # April 23, 2011 at 12:50 am

    I’m in the process of going through all my code, just to clean up what I don’t need. Once I’m done doing that I’ll post all my html and css on here. Hopefully I can figure out the problem in the mean time and the issue resolves itself after some cleaning.

    # April 23, 2011 at 3:46 am

    Well I cant seem to figure out what the problem is. Here is all my code. Hope you guys can figure this one out.

    HTML code

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

































  • twitter




  • facebook






  • About Me


    about me

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.





    My Services


    services i offer

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.





    My Tools


    tools

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
















  • Now here is the CSS

    /* CSS Reset */
    * { margin: 0 auto; padding: 0;
    outline: 0;
    border:none;
    list-style-type: none;



    }

    body {
    background:url(images/bg.jpg) repeat-x;
    font-family: Arial, Helvetica, sans-serif;



    }

    #container {
    width: 960px;
    margin: 0 auto;


    }

    #header {
    position:relative;
    width: 100%;
    bottom: 6px;

    }

    #header h1 {

    float:left;
    width:365px;
    height:115px;
    margin-top: 35px;
    }

    #header h1 a {

    height: 100%;
    width: 100%;
    }
    #header ul li h6 {
    font-size: 11px;
    }

    #nav {
    clear: both;
    height: 30px;
    width: 100%;
    }
    #nav ul {

    position: absolute;
    right: 180px;
    top: 20px;

    }

    #nav ul li {
    display: inline;
    float: left;
    }


    #nav ul li a {
    color: white;
    display: inline;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    font-family: calibri, georgia, garamond, arial;
    text-transform: uppercase;
    text-align: right;
    float: left;
    padding: 10px;


    }

    #nav li a span {


    line-height: 28px;
    height: 100%;

    }

    #nav li a:hover, #nav li {

    color: #ffc000;
    cursor: pointer;
    text-decoration: none;
    }

    #featured {

    padding: 10px;
    height: 340px;
    width: 940px;
    border:1px dashed;
    color: #ffe5c4;
    background-color: #562e00;


    }
    #featured ul {

    }

    #featured ul li {
    float: left;
    display:block;
    width: 630px;
    }

    #featured ul li a {
    display: block;
    height: 350px;
    }


    #featured ul li.ss1 img a {
    background: url(http://cdn.css-tricks.com/images/featured.jpg)

    }


    form#quote {
    background: #ce9426;
    background-image: -webkit gradient(
    linear,
    left top, left bottom,
    from(#b37725), to (#e4ac27)
    );
    padding: 20px;
    float: right;
    width: 260px;
    height: 300px;
    }

    form#quote h2 {
    font: normal; "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff;
    }

    form#quote label {
    color: #ffffff;
    font-size: 12px;
    font-family: arial, verdana, georgia;
    float: left;
    width: 100%;
    padding:5px;


    }

    form#quote input, form#quote textarea {
    background-color: #303030;
    color: white;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 7px 8px;
    padding: 10px;
    width: 240px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 4px 0 -6px #c4c4c4;
    -moz-box-shadow:inset 0 0 6px #7a7a7a;
    -webkit-box-shadow:inset 0 0 6px #7a7a7a;
    box-shadow:inset 0 0 6px #7a7a7a;
    resize: none;

    }




    form#quote textarea {
    height: 50px;


    }

    form#quote input.btn {
    width: auto;
    border: none;
    padding: 1px;
    margin-top: 0px;
    }

    #content {


    font-size: 12px;
    list-style: none;

    }
    #content .col {
    float: right;
    width: 258px;
    background: url(./images/col-bg.jpg) repeat-x;
    height: 193px;
    border: 1px solid #CCC;
    padding: 10px;
    margin-right: 830px;
    margin-top: -225px;


    }
    #content .col h2 {
    font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #b47825;
    text-decoration: none;

    }
    #content .col h2 span {
    color: #2f2f2f;

    }


    #content .col img {
    border:1px opacity: 0.5; dashed; #d8d8d8;
    padding: 2px;
    float: right;

    }




    #content .col p {

    line-height: 17px;
    }

    #content .col.noMargin {

    margin-right: 510px;


    }

    #content .col.fr {


    margin-right: 190px;
    margin-top: -225px;

    }

    #twitter {

    float:right;
    position: absolute;
    margin: -508 60 50 1025;
    }

    #facebook {

    float:right;
    position: relative;
    margin-right: 184px;
    margin-top: -597px;
    }



    textarea {
    width: 200px;
    max-width: 240px;
    min-width: 240px;
    height: 200px;
    min-height: 45px;
    max-height: 45px;


    #footer {
    clear: both;
    background: url (http://cdn.css-tricks.com/images/footer.jpg)
    height: 100px;
    width: 100%;
    margin-top: 140px;

    }

    #footerContainer {
    margin: 0 auto 0;
    width: 960px;
    font-size: 12px;
    color: #ddd;
    padding-top: 20px;
    position: relative;
    }


    #footerContainer p {
    margin: 8px 0 8px;
    }
    #footerContainer a {
    color: #ddd;
    text-decoration: none;
    }
    #footerContainer a:hover {
    text-decoration: underline;
    }

    form#newsletter {
    position: absolute;
    right: 0;
    top: 20px;
    width: 300px;
    }
    form#newsletter label {
    font-weight: bold;
    color: #fff;
    }
    form#newsletter input {
    background-color: #fff;
    border:1px solid #ddd;
    color: #666;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 0 0;
    padding: 8px;
    width: 190px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    }








    # April 23, 2011 at 8:31 am

    jesb, one of the first things to do when troubleshooting is to run your code (both html and css) through a validator. This will point out any errors that you have.

    Your posted html has 8 errors, all easy to correct, and one directly relating to the problem. You have an extra closing div tag (in the header area) which closes the container too soon.

    You have also been trying to correct positioning with margins (negative and normal) which, once the html is cleaned up, is having an effect on numerous elements. So, you may need to back-track a bit, changing or eliminating those margins.

    You have an extraneous clearing div (which I think was recommended above) – not only is this not needed, but you don’t even have a class addressing it in the css.

    The css has a missing closing brace after the textarea selector rendering the #footer ruleset useless.

    # April 23, 2011 at 3:41 pm

    O.k, so I managed to finally see the footer take place. Still having a problem with getting the image to appear though. I’ve tested it by using color instead and that comes up fine and I can clearly see a footer now, so that’s good. But still no image will appear that I saved.

    I’m guessing this has something to do with this error.

    Parse Error (images/footer.jpg);

    I don’t know what the issue is with this. The error is kind of vague for a noob like me.

    I’m going through the validator and cleaning it up like you suggest. But there some things I’m a little confused about that brings up errors.

    I’m told that ul does not belong possibly because I have inline elements with block elements. But if a UL is a block element, and anchor tag is a inline element, than how do we make lists into links? I guess I’m confused on why I cant have lists with an a tag, putting a tags with lists seem to be a common thing on the web, so what exactly do they mean by the error.

    Error: element ul not allowed here; possible cause is an inline element containing a block-level element

    Also I get a lot of errors for webkit radius, shadow box, ect. Are these newer properties that come out as errors and should they be ignored?

    You mentioned eliminating margins, but it’s those margins I used that allowed me to put my layout together where I want certain things. I tried many different properties and this seemed to of what worked. Taking out all these will surely mess it all up. But if there is an easier way of doing it perhaps I should.

    Thanks to those who have helped.

    # April 23, 2011 at 4:32 pm

    Close the space between url and the bracket on this line and your footer image will show:
    url (http://cdn.css-tricks.com/images/footer.jpg)

    Lines like these are wrong


  • twitter

  • You are missing the ul tags – like this



    • twitter


Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

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