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.