[web] A weird CSS problem

I use the following html code for a navigation bar:

  

    <h1>section 1</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </ul>
  
  

    <h1>section 2</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </ul>
  

My goal is to style it with CSS to create rounded corners. I apply a background image to #sidebar. This gives me rounded corners at the top. However, when I try to apply another background image at the bottom of #sidebar #section2 it appears that #section2 doesn't run all the way down to the end of #sidebar. I can see the image at the end of #section2 and then there's some more space after it (filled with background color of #sidebar). It doesn't appear to be a padding or margin issue. The interesting thing is that when I add a border with a single pixel width to #section2, the problem disappears (the space between the end of #section2 and #sidebar goes away). Of course the border screws up the look [smile] Does anyone have any idea of what I am doing wrong?