title: image-line that behave differt in firefox browser
body: <p>I am working on this following website:</p>
  
  <p><a href="http://www.matteocorona.com/grid/index2.html" rel="nofollow">Click here to see</a>.</p>
  
  <p>I have an issue that I cannot solve.</p>
  
  <p>As u can see, there is a green line in the main menu.
  This green line should stay behind the green circles buttons, at the y-middle of them.</p>
  
  <p>If I watch the web site with firefox that line appears lot of pixels under the circle buttons and not behind in the middle.</p>
  
  <p>Watching the website with chrome or explorer, there are no problems to report.</p>
  
  <p>some css:</p>
  
  <pre><code>div#line {
      background-image: url('http://www.matteocorona.com/grid/img/line.png');
      background-repeat: repeat-x;
      background-position-y: 80%;
  }
  </code></pre>
  
  <p>Any help to solve this mysterious strange behave?</p>
  
  <p>Thanks</p>
  
  <p>Matteo</p>