title: css background-position not working
body: <p>I have 3 a tags disguised as "roll over buttons".</p>
  
  <pre><code>&lt;div id="buttons"&gt;
      &lt;a class='button' id='but1' href=''&gt;&lt;/a&gt;
      &lt;a class='button' id='but2' href=''&gt;&lt;/a&gt;
      &lt;a class='button' id='but3' href=''&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each button is getting its initial image from the CSS as follows:</p>
  
  <pre><code>.button{
      background:url(theimage.jpg);
      width;height; etc...
  }
  </code></pre>
  
  <p>Now, when i try to assign initial background position for each specific element as such:</p>
  
  <pre><code>#but1{
      background-position:0 0;
  }
  #but1:hover{
      background-position:0 -50px;
  }
  
  #but2{
      background-position:0 -100px;
  }
  #but2:hover{
      background-position:0 -150px;
  }
  
  #but3{
      background-position:0 -200px;
  }
  #but3:hover{
      background-position:0 -250px;
  }
  </code></pre>
  
  <p><strong>The Issue:</strong> each button defaults to position 0 0</p>
  
  <p>Note that the hover positions work as expected.</p>
  
  <p>I'm kind of sick right now so this is probably an oversight but I've been stairing at this for an hour now and can't figure it out. </p>
  
  <p>Any thoughts?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong> pastebin love <a href="http://pastebin.com/SeZkjmHa" rel="noreferrer">http://pastebin.com/SeZkjmHa</a></p>