Hey guys, I am having another problem with another layout of mine.

Temporary link to my problem layout: http://zn-mf1.webs.com/public/publictest.htm
An image to better understand my problem: http://img830.imageshack.us/i/highlightproblem.png/

Here is the problem:
Basically whenever I highlight my webpage using Ctrl+A in IE8, the whole unused area will be highlighted (the footer is highlighted too, although I don't really mind the highlighted footer area). The same goes for Chrome but Chrome only show a smaller portion below my logo picture. Firefox 4 doesn't have this problem.

If I am not wrong, this problem is caused by my new footer CSS code that I used (founded the code at http://www.cssstickyfooter.com/html-code.html). The reason why I said that is because before I added a footer to my webpage, whenever I ctrl+A, the areas will not be highlighted.

I spend about 6 hours trying to figure out but well, I am new to CSS so I do not have suffice knowledge to crack this problem. Can someone help me to check my code to see why is this problem happening?

CSS
Code:
@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
} 

html, body {
	height: 100%; /* Footer properties */
}

/* Font and Background */
body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	text-align: center;
	background-image: url(http://zn-mf1.webs.com/actual/ActualBG11.png);
    background-repeat: repeat-x; /* repeat BG horizontally */
    background-color: #000000;
}

/* Wrap for Footer */
#wrap {
	min-height: 100%;
}

/* Main Container */
#page-container {
	width: 1006px;
    margin-right: auto;
    margin-left: auto;
	text-align: left;
	padding-top: 52px; /* Move down background banner away from nav bar */
	overflow: auto; /* Footer properties */
	padding-bottom: 47px; /* Footer properties same as footer height */
}

/* Banner aka Header */
#header {
    background-image: url(http://zn-mf1.webs.com/public/ZNBannerpublic.png);
    background-repeat: no-repeat;
	height: 200px;
	width: 1006px;
}

/* Footer */
#footer {
	position: relative; /* Footer properties */
	margin-top: -47px; /* Footer properties negative value of footer height */
	height: 47px;
	clear:both; 
	background-image: url(http://zn-mf1.webs.com/actual/ZNFooter.png); 
    background-repeat: repeat-x; 
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
	text-align: left;
}

#footer-content {
    height: 45px;
    width: 1006px;
    margin: auto; 
}

#footer #webs {
	width: 200px;
	float: right;
	text-align: right;
	clear: both;
}

#footer a {
	color: #c9c9c9;
	text-decoration: none;
}

#footer a:hover {
	color: #db6d16;
}

#footer-content p {
    text-transform: capitalize; /*TRANSFORMS THE FIRST LETTER IN EVERY WORD TO A CAPITAL LETTER*/
    padding-top: 5px; /*ADDS TOP PADDING*/
    padding-left: 20px; /*ADDS LEFT PADDING*/
}

/*Opera Fix for Footer*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Public Test</title>
<link href="http://zn-mf1.webs.com/public/masterpublic.css" rel="stylesheet" type="text/css" />

	<!--[if !IE 7]>
		<style type="text/css">
			#wrap {display:table;height:100%}
		</style>
	<![endif]-->

</head>

<body>
<div id="wrap">
<div id="page-container">

<div id="header"></div>

</div><!--PAGE-CONTAINER ENDS-->
</div><!--WRAP ENDS-->

<div id="footer"><!--FOOTER STARTS-->
<div id="footer-content">

<div id="webs">
<p><noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_roundgrey.js"></script></p>
</div>

<p><a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a></p>
<p>Copyright &copy; test Powered by <a href="http://www.webs.com/">Webs.com</a> and <a href="#">test</a></p>

</div><!--FOOTER CONTENT ENDS-->
</div><!--FOOTER ENDS-->

</body>
</html>
Thanks and sorry for the trouble again!