Footer wiping out border

**bradles** · Aug 25, 2004, 20:57

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.

**bradles** · Aug 25, 2004, 21:00

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.

**Paul O'B** · Aug 26, 2004, 03:33

Yes that's a common mistake

User Tag List

Thread: Footer wiping out border

Thread Tools

Display

Hybrid View

Footer wiping out border

Bookmarks

Bookmarks

Posting Permissions