title: IE8 background-position on :hover not moving file
body: <p>I'm using the background-position method of changing an image when I hover over it. This is working fine for me in FF, Chrome, and Safari, but not in IE8. The background image is a .png that contains alpha transparency. I've run my code through the W3C validator and it is valid, so I shouldn't be hitting compatibility mode.</p>
  
  <p>Here's the relevant snippet of html code:</p>
  
  <pre><code>&lt;div id="main-nav"&gt;
  &lt;div id="texas"&gt;
    &lt;a href="texas.html"&gt;&lt;span&gt;texas&lt;/span&gt;&lt;/a&gt;
    &lt;h2&gt;texas&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="washington"&gt;
    &lt;a href="washington.html"&gt;&lt;span&gt;washington&lt;/span&gt;&lt;/a&gt; 
    &lt;h2&gt;washington&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the relevant css:</p>
  
  <pre><code>#main-nav {
    width: 844px;
    height: 400px;
    margin: 40px auto; 
    position: relative;
  }
  
  #texas, #washington { 
    position: absolute; 
    height: 500px; 
    width: 196px;
  }
  
  #texas a {
    background-image: url("pics/texas.png"); 
  }
  
  #washington a {
    background-image: url("pics/washington.png");
  }
  
  #texas a, #washington a { 
    height: 400px; 
    width: 196px;
    display: block;
  }
  
  #texas a:hover, #washington a:hover { 
    background-position: 196 0; 
  }
  </code></pre>
  
  <p>Help?</p>