SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer wiping out border

    I'm having a little trouble understanding why my site won't show my footer properly. I have read the FAQ regarding footers and I am testing my site on IE6 and Firefox 0.9.3.

    Basically, I don't understand why my footer does not show a black border around it. I put a border on the footer as a bandaid as I could not get the footer to sit just inside the content box so that the bottom border of the content box would show. Can someone point me in the right direction so that I can get my footer working how I would like it too? I don't know that I'm understanding the calculating for top and bottom margins that well.
    I have put my code below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */
    
    body {
    padding: 0;
    margin: 0;
    text-align: center; /*Center the content div*/
    height: 100%;
    }
    
    #content {
    margin: 10px auto;
    height:auto;
    width: 760px;
    min-height: 100%; /* for mozilla*/
    text-align:left; /*so content isn't centered as body is*/
    border: 1px solid #000;
    background: #FFF;
    margin-bottom:-50px; /*for footer*/
    }
    
    * html #content{height:100%;}
    
    #footer {
    margin: 0 auto; /*auto margin required for left/right to center footer*/
    width:760px;
    clear:both;
    height:50px;
    text-align:left;
    background-color: #FF8080;
    border: 1 px solid #000;
    }
    
    #clearfooter{clear:both;height:50px;}
    
    #gap{
     margin: 0 auto;
     width:760px;
     height:10px;
     background:#fff;
    }
    
    div>p {margin:0}
    
    </style>
    </head>
    
    <body>
    <div id="content">
    	Content Here
    	<div id="clearfooter"></div>
    </div>
    <div id="footer">Footer</div>
    <div id="gap"></div>
    </body>
    </html>
    Thanks.

    Brad.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to reply to my own thread but I just figured out why my border wasn't showing on my footer.

    I had:

    border: 1 px solid #fff;

    There shouldn't have been a space between the "1" and the "px".

    Brad.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that's a common mistake


Bookmarks

Posting Permissions

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