Grow your CSS skills. Land your dream job.

Footer appears on home.php but not on other pages.

  • # September 13, 2011 at 5:51 pm

    The link to the homepage is http://lm.ccgideas.com/

    As you can see the footer shows up totally fine here. But go to http://lm.ccgideas.com/parts and the footer does not show up.

    There is a different style sheet for the parts page but the background image for the footer is the same.

    Any ideas? Thank you kindly.

    Bob
    # September 13, 2011 at 6:04 pm

    That is because in the stylesheet for the parts page, your only code for the footer is this:


    p#footer {width:860px; height:62px; margin:5px 0 0 0; background-image:url(images/bottom-bg.png); background-position:center;
    background-repeat:no-repeat; font-size:11px; padding:13px 50px 0 50px;}

    #footer .social-media-link {border-bottom:none; text-decoration:none; position:relative; top:11px;}

    There is no image in that code, as opposed to the code on your main page, which looks like this:

    #content #footer {background-color:transparent; width:960px; height:75px; margin:5px 0 0 0; text-align:center; background-image:url(images/bottom-bg.png); background-position:center; background-repeat:no-repeat;}
    #content #footer p {font-size:11px; margin:0 auto; height:50px; position:relative; bottom:23px;}
    #content #footer #social-media {margin-left:45px; width:90px; position:relative; bottom:6px;}
    #content #footer #social-media p {margin:0; float:left;}
    #content #footer #social-media p a {float:left; width:25px; height:25px; margin-left:5px; text-decoration:none; border:none; text-indent:-999999px;}
    #content #footer #social-media p #facebook {width:28px; height:28px; text-indent:-999999px;
    background-image:url(images/icon-facebook.png); background-repeat:no-repeat;}
    #content #footer #social-media p #twitter {width:25px; height:25px; text-indent:-999999px;
    background-image:url(images/icon-twitter.png); background-repeat:no-repeat;}
    #content #footer #footer-text {padding-top:29px;}
    # September 13, 2011 at 6:08 pm

    Thank you for your reply. However, I made the styling for the footer identical in both stylesheets and it’s still not showing.

    Bob
    # September 13, 2011 at 6:16 pm

    I think that would be because on your home page, the #footer div is inside your #content div, like you have in your css code: #content #footer { … }

    On your parts page, either put the #footer div in the #content div as well or just change your css code from #content #footer { … } to #footer { … }

    # September 13, 2011 at 6:21 pm

    Wow I don’t know how I missed that. Thank you, Bob.

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

You must be logged in to reply to this topic.

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