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

[pixelgirl]

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.

Any help would be appreciated.

Thanks!
(css and html code below)

Code: Select all

/*------------------------------------------------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: Select all

        <!--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>

[frotto]

try and swap position:relative for position:absolute in the footer.
and remove the three 0 from padding by footer p.design

did it help?