Green bar of colour at bottom of page gets bigger the more page is extended

I am reasonably new to CSS and I understand most basic concepts, but cant seem to see why I am having the problem described below.

Basically I have used a css and webpage template for my site, and altered it slightly to get the look I want, but cant seem to get rid of a green bar of colour that appears at the bottom of every page and more green is visible the longer I make the page.

From what I understand the css is seperated out in to styles for different sections of the page, so I have only included the bottom section as this is where I am having the problem. I cannot identify where the green would be coming from.

Screen grab of problem attached and css and html code below

Any help would be appreciated.

Thanks!

/*------------------------------------------------footer start---------------------*/
#footer{
width:778px;
height:207px;
margin:0 auto;
padding:31px 0 0 0;
background:url(images/footer_bg.gif) left bottom no-repeat;
position:relative;
}
#footer ul{
width:559px;
margin:0;
padding:0;
position:absolute;
left:148px;
top:31px;
}
#footer ul li{
margin:0;
float:left;
font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#880000;
background-color:#FFFFD5;
background-image:none;
}
#footer ul li a{
font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#880000;
background-color:#FFFFD5;
text-decoration:none;
padding:0 10px 0 10px;
}
#footer ul li a:hover{
color:#000;
background-color:#C6EC62;
}
#footer p.copyright{
font:normal 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
background-color:#FFFED0;
position:absolute;
left:285px;
top:50px;
}
#footer p.design{
display:block;
width:194px;
height:17px;
border:#E1E08E solid 1px;
padding:0 0 0 35px;
position:absolute;
left:291px;
top:72px;
font:bold 11px/17px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#990000;
background-color:#fff;
}
#footer a.link{
width:85px;
font:bold 11px/17px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#990000;
background-color:#fff;
padding:0 3px;
text-decoration:none;
text-transform:capitalize;
}
#footer a.link:hover{
color:#fff;
background-color:#B50000;
}
/*------------------------------------------------footer end---------------------*/

Code (markup):

<!--right panel end -->
<p class="bot"></p>
<br class="spacer" />
</div>
<!--body end -->
<!--footer start -->
<div id="footer">
<ul>
<li><a href="#">Search </a></li>
<li><a href="register.php">Advertise</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="#">Admin Login</a></li>
</ul>

<p class="design">Designed By: <a href="http://www.templateworld.com/" target="_blank" class="link">Template World</a></p>
</div>
<!--footer end -->
</body>
</html>

Code (markup):

 

I would look in your CSS at the "body" definition. That green bar doesn't even seem like it's part of the "footer". It's definitely not included in the CSS you posted.