www.webdeveloper.com
Results 1 to 2 of 2

Thread: Sticky Footer Not Working

  1. #1
    Join Date
    Mar 2008
    Posts
    20

    Sticky Footer Not Working

    Hello, having problem with my footer. At the moment I'd like it stuck to the bottom of the browser window, and whilst it will do that with the below code in the browser am using it breaks the middle part of the website page. I've applied it to this page: www.jonpaulwild.co.uk/contact/error (an error mailing page) I've not changed the xhtml for the rest of the site as it's something I've just noticed I need to do with small content.

    Code:
    @charset "utf-8";
    /* Start Misc*/
    * { margin: 0; padding: 0; }
    html, body {font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #252525; height: 100%}
    p, h1, h2 {line-height: 18px;}
    img {border: 0;}
    p {margin-top: 10px; padding-bottom: 20px; text-align:left; font-size: 13px; font-weight: normal; color: #666666;}
    h1 {margin-left: 40px; width: 200px; margin-top:0; padding-top: 55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center;}
    h2 {font-size:16px; font-family: Arial, Helvetica, sans-serif; text-align:left; font-weight: bold; color:#006600; padding-bottom: 30px;}
    h3 {color:#CC0066; font-size: 14px; font-family:Arial, Helvetica, sans-serif; padding-bottom: 10px;}
    .clear {clear:both}
    /* End Misc- */
    #container{ position:relative; height: auto; height: 100%; min-height: 100%;}
    /* Begin Header-- */
    #headerwrapper {width: 100%; height: 100px; background-color: #FFFFFF; width: 100%;}
    #header {width: 800px; height: 100px; margin: 0 auto}
    #headerleft {margin-top: 10px; width:400px; height: 82px; float:left; background-color: transparent;}
    #headerright {margin-top: 20px; margin-left: 160px; width:191px; height: 53px; float:right; background-color:transparent}
    /* End Header-*/
    /*Start Main navigation-*/
    #navwrapper {width: 100%; clear:both; background-color:#006633; background-image:url(../images/prinavbg.jpg); background-repeat:repeat-x; height: 42px}
    #prinav {background: url(../images/buttons.jpg);height: 42px; width: 483px; margin: 0px auto; position: relative}
    #prinav li {list-style-type: none; float: left}
    #prinav a {height: 42px; display: block}
    #home { width: 121px}
    #about { width: 120px}
    #services { width: 120px}
    #contact { width: 122px}
    #home a:hover {background: url(../images/buttons.jpg) 0px -42px no-repeat;}
    #about a:hover {background: url(../images/buttons.jpg) -121px -42px no-repeat;}
    #services a:hover {background: url(../images/buttons.jpg) -241px -42px no-repeat;}
    #contact a:hover {background: url(../images/buttons.jpg) -361px -42px no-repeat;}
    .home #prinav li#home a {background: url(../images/buttons.jpg) 0px -84px no-repeat;}
    .about #prinav li#about a {background: url(../images/buttons.jpg) -121px -84px no-repeat;}
    .services #prinav li#services a {background: url(../images/buttons.jpg) -241px -84px no-repeat;}
    .contact #prinav li#contact a {background: url(../images/buttons.jpg) -361px -84px no-repeat}
    /* End Main Navigation*/
    /* Begin Secondary Navigation */
    #secnav {width: 100%; background-image:url(../images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;}
    #secnav ul {margin: 0 auto; width: 700px; text-align: center; height: 20px; background-color: transparent; padding-top: 4px;}
    #secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight: normal;}
    #secnav li a {text-decoration: none; color: #3f3f3f}
    #secnav li a:visited {color: yellow;}
    #secnav li a:hover {color: yellow; text-decoration:underline;}
    #secnav li a:active {color: yellow;}
    #secnav li a.selected {color: purple;}
    /* End SecondaryNavigation- */
    /* Begin Content - Global- */
    #content_wrapper{width: 100%; margin: 0 auto; height: auto; background-image:url(../images/contentbg.jpg); background-repeat:repeat-x; background-position:top;  background-color: #ececec; padding-bottom: 100px;}
    #content_wrapper_header {width: 741px; margin: 0 auto; height: 105px; background-image:url(../images/contenttop.jpg); background-repeat:no-repeat;;}
    #content_wrapper_page{height: auto; margin: 0 auto; width: 741px; background-image: url(../images/contenttop.jpg); background-position: 0px -105px; background-repeat:no-repeat; padding-bottom: 40px;}
    /* End Content - Global-- */
    /*Begin About - Company-- */
    #companycontent {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
    #companycontent img {float:right; width: 240px; height: 143; border-width: 1px; border-style:solid; border-color: #CCCCCC; margin-bottom: 10px; margin-left: 10px;}
    .companyfact{padding-top: 25px; padding-bottom: 25px;}
    .companyfact li {color: green; font-weight: bold; background-image:url(../images/tick.jpg); background-repeat:no-repeat; background-position: left center; list-style-type: none; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 1px; padding-left: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 60px; line-height: 25px; font-size: 13px;}
    /*End About - Company -- */
    /* Begin Customers - */
    #customer_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
    #customer_content img {float: right; width: 241px; height: 286px; margin-top: -147px;}
    #customer_blocks  {margin-left: 90px;}
    #customer_blocks li {list-style: none; display:block; float: left; padding: 10px;}
    #customer_blocks img {border-style:solid; border-width: 1px; border-color: #CCCCCC; width: 156px; height: 105px;}
    /* End Customers - */
    /* Begin Contact - */
    #map {margin-left: 25px;   width: 700px; height: 270px;}
    #contact_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 410px}
    #contact_content_right {float: right; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 199px}
    label {color: green; font-size: 12px; font-weight: bold;}
    input {height: 25px}
    input, textarea {border: solid;border-style:solid; border-width: 1px; background-color: #EBE0FE; border-bottom-color: #999999; border-left-color: #666666; border-top-color: #666666; border-right-color: #999999}
    submit {color:#FFFF00; border: none;}
    .btn {height: 35px; width: 109px; border: none; background:url(../images/submit.jpg); background-repeat:no-repeat;}
    .btn:hover {background: url(../images/submit.jpg) 0px 35px; background-repeat:no-repeat}
    #map a {color: green; font-size: 10px; font:Arial, Helvetica, sans-serif; text-align:center;}
    #map iframe {border:solid; border-color:#009900; border-width: 1px;}
    /* End Contact - */
    /* Begin contact - vacancies-*/
    #vacancies_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;}
    #vacancies_content a {text-decoration: underline; color: orange; font-weight: normal}
    #vacancies_content a:visited {color: yellow;}
    #vacancies_content a:hover {color: yellow; text-decoration:underline;}
    /* End contact - vacancies --*/
    #footerwrapper {width: 100%; height: 100px; background-color: #333333; border-top-width: 3px; border-top-color: #FFCC00; border-top-style: solid; position:relative;}
    #footer {margin: 0 auto;  height: 100px; width: 700px;}
    #footernav {color:#CCCCCC; text-decoration:underline; height: auto; font-size:10px; margin-top: 0px;}
    #footerleft {float: left; width: 500px; height: auto; margin-top: 10px;}
    #footerright{float: right; width: 200px; height: auto; margin-top: 10px;}
    #footerleft p {color:#CCCCCC; margin-top: 0px; padding-top: 0px; text-align: left;font-size: 10px; text-decoration: none; padding-bottom: 2px; }
    #footerright p {color:#FFFFFF; margin-top: 0px; padding-top: 0px; text-align:right;font-size: 10px; text-decoration:none; padding-bottom: 2px;}
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>About the Company - Our Customers</title>
    <link href="../css/master.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="headerwrapper">
        <div id="header">
            <div id="headerleft"><img src="../images/logo.jpg" alt="logo"/></div>
            <div id="headerright"><img src="../images/phone.jpg" alt="phone"/></div>
            <div class="clear"></div>
        </div><!-- end header ->
    </div><!-- end header wrapper ->
    <div id="navwrapper" class="contact">
        <ul id="prinav">
            <li id="home"><a href="/"></a></li>
            <li id="about"><a href="/about"></a></li>
            <li id="services"><a href="/services"></a></li>
            <li id="contact"><a href="/contact"></a></li>
        </ul><!-- end the prinav ul list->
    </div><!-- end nav wrapper ->
    <div id="secnav">
        <ul>
            <li><a href="/contact">Contact Us</a></li> 
            <li><a href="/contact/vacancies"  class="selected">Vacancies</a></li>
        </ul>
    </div><!-- end secnav ->
    <div id="content_wrapper">
    <div id="content_wrapper_header">
      <h1>Error</h1>
    </div><!-- content_wrapper_header ->
    <div id="content_wrapper_page">
    <div id="vacancies_content">
    <h2>Error?</h2>
    <p>Unfortunatly your e-mail has failed. Please try again. This is due to the spam prevention software implemented.</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div><!----end vacancy content -->
    <div class="clear"></div><!-- dlear ->                   
    </div><!-- end content wrapper page -->
    </div><!--end content wrapper -->
    </div><!--end container -->
    <div id="footerwrapper">
        <div id="footer">
            <div id="footerleft">
            <div id="footernav">Site Map</div>
                <p>Copyright &copy; </p>
                <p>Registered office:  2NE</p>
                <p>Company No. 359 548 4584 12</p>
            </div><!-- end footerleft -->
    <div id="footerright"><p>test site</p></div>
    <div class="clearboth"></div>
    </div><!--end footer-->
    </div>
    <!--end footerwrapper -->
    </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles