Top of round rectangle not working

Question

I'm trying to make an infinite round rectangle, but I cant seem to get the top to comply... heres what it looks like... http://animactions.ca/Animactions/accueil.php

You will notice the bottom of the round rect is fine, but Iv been trying for hours to figure out the top. Thanks

sorry, the site upload had failed, now it is up

picture of problem http://img511.imageshack.us/img511/6272/probleml.png

Html

<div id="page_content">
<div id="top">&nbsp;</div>
<div id="middle">

    <h1>Site under construction</h1>
    <p>Hello, this Web Site is not done yet, sorry.... </p>

</div>
<div id="bottom">&nbsp;</div>

    </div>

CSS

#top {
    background-position: center bottom;
    background: url('Images/RoundRect/top.png') no-repeat center
bottom;
    height : 12px;
    padding : 0;
    margin: 10px auto 0 auto;
    width: 910px;
}

#middle {
    background-position: left top;
    padding: 0;
    margin: 0 auto 0 auto;
    width: 910px;
    height: 5em;
    background-repeat: repeat-y;
    background-image: url('Images/RoundRect/middle.png');
}

#bottom {
    background-position: center top;
    background: url('Images/RoundRect/bottom.png') no-repeat center
top;
    height : 12px;
    padding : 0;
    margin: 0 auto 10px auto;
    width: 910px;
}

Answer 1

This is because of the h1 element. It creates a margin at the top. Add this to your CSS:

h1 {margin-top: 0px}

If you use Firefox, install Firebug. It is a great tool for debugging the HTML code and also highlights the padding and margin areas for elements.