Skip navigation
1111lauer
1111lauer Calculating status...
Currently Being Moderated

Footer is not appearing?

Aug 16, 2012 12:43 PM

Can anyone help me figure out why the footer is not appearing on this page: http://wakinguptogether.org/index_test6.html

 

I'm using the footer CSS from one of the Dreamweaver supplied pages and I'm a beginner with CSS.  I'm at my wits end.  This is happening on another site i'm working on as well.  Thanks in advance for any help!

919 Views   11 Replies   Latest reply: 1111lauer, Aug 17, 2012 12:55 PM
 
Replies
  • Rik Ramsay
    Currently Being Moderated
    1. Rik Ramsay,
    Aug 16, 2012 1:10 PM   in reply to 1111lauer
    Report

    Change:

    }</script>

    </script>

    </script>

    <p></p><script type="text/javascript">

    <div class="footer">

    <p>Copyright 2012, Elizabeth Rabia Robert &amp; The Boulder Institute</p>

    <!-- end .footer --> </div>

    <!-- end .container --> </div>

    to:

    }</script>

    <div class="footer">

    <p>Copyright 2012, Elizabeth Rabia Robert &amp; The Boulder Institute</p>

    <!-- end .footer --> </div>

    <!-- end .container --> </div>

     

    That should sort the footer issue. However, you may want to validate your page as you have styles and scripts all over the place.

    http://validator.w3.org/

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    2. 1111lauer,
    Aug 16, 2012 2:10 PM   in reply to Rik Ramsay
    Report

    Thanks for your help! Unfortunately the code fix you suggested resulted in the footer showing up at the bottom of the right side bar instead of at the bottom of the page.  Any other suggestion?

    I reposted the page again with your suggestion added: http://wakinguptogether.org/index_test6.html

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    3. Rik Ramsay,
    Aug 16, 2012 2:20 PM   in reply to 1111lauer
    Report

    Try this: http://pastebin.com/jxY49vkb

     

    What I did:

    • There was a </div> missing after the sidebar div so this was added in.
    • I then moved the footer below the content and sidebar but inside the container.
    • I gave the footer div a 100% width and float:left.
    • I added overflow:auto to the container to contain the floats.
    • I cleaned up the code to remove all your errors so it should now be error free.

     

    Rik

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    4. 1111lauer,
    Aug 16, 2012 4:04 PM   in reply to Rik Ramsay
    Report

    Wow!  Awesome!  Thank you so much.  It works great.  I so appreciate your help!!

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    5. 1111lauer,
    Aug 16, 2012 5:18 PM   in reply to Rik Ramsay
    Report

    I feel pretty sheepish asking, but I have the exact same problem on this page, on a different site: http://www.skytribe.com/contact.html, the footer doesn't display. Yet on this page: http://www.skytribe.com/video.html, the footer does shows up? Thanks again for your help, you rock!

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    6. mytaxsite.co.uk,
    Aug 16, 2012 5:43 PM   in reply to 1111lauer
    Report

    1111lauer wrote:

     

    I feel pretty sheepish asking, but I have the exact same problem on this page, on a different site: http://www.skytribe.com/contact.html, the footer doesn't display.

     

    which browser are you using to view your pages?  I tested your site in FF and IE9 and I can see the footer all right but not at the correct place.  Click on this image to see it framed in red color:

     

    2012-08-17_0140.png

    Good luck.

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    7. 1111lauer,
    Aug 17, 2012 8:24 AM   in reply to mytaxsite.co.uk
    Report

    Thanks for the feedback: I forgot to say in my post, that the footer, when correctly displayed, looks like it does on this page: http://www.skytribe.com/video.html.  So it's a seperate entity.  The copy in the footer is correct but it doesn't layout correctly as shown in the link in this post.

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    8. Rik Ramsay,
    Aug 17, 2012 8:47 AM   in reply to 1111lauer
    Report

    That's the problem with having your styles embedded on each page rather on one single CSS file - things change per page and you lose track. Combine all your styles into one CSS file and link each page to the same sheet. This will keep things consistent.

     

    www.skytribe.com/contact.html

    /* ~~ The footer ~~ */

    .footer {

    position: absolute;

    background-image: url(images/Footer2.jpg);

    background-repeat: no-repeat;

    height: 75px;

    padding-top: 10px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0px;

    text-align: center;

    width: 100%;

    float: left;

    clear: right;

    font-style: normal;

    }

     

    www.skytribe.com/video.html

    /* ~~ The footer ~~ */

    .footer {

    position: relative;/* this gives IE6 hasLayout to properly clear */

    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

    background-color: #000000;

    background-image: url(images/Footer3.jpg);

    background-repeat: no-repeat;

    height: 64px;

    padding-top: 15px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0;

    text-align: center;

    }

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    9. 1111lauer,
    Aug 17, 2012 10:27 AM   in reply to Rik Ramsay
    Report

    Thanks for the suggestion - I did try it and it didn't work (I reposted the file with the new CSS - http://www.skytribe.com/contact.html ).   I've tweaked the CSS of the footer so much and found nothing that works. Really appreciate your time/help!

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    10. Rik Ramsay,
    Aug 17, 2012 10:44 AM   in reply to 1111lauer
    Report

    Add the closing bracket to one of your CSS rules - it appears that the styles below this one are not being used due to a missing closing bracket.

    .content ul, .content ol {

              padding: 0 15px 15px 40px;

    } /* Add this closing bracket in */

     
    |
    Mark as:
  • 1111lauer
    Currently Being Moderated
    11. 1111lauer,
    Aug 17, 2012 12:55 PM   in reply to Rik Ramsay
    Report

    THAT'S IT!!  Wow, you're a genius (or pretty darn close).  I really appreciate your help!  Thanks again and have a great weekend.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points