title: CSS sprite background does not shift
body: <p>I have become increasing frustrated with what should be fairly simple CSS sprite code.  I have been working on a map of counties that enlarges the county name when the mouse hovers over the link box which is a little bit bigger than the size of the county name.</p>
  
  <p>Here is my html code for two counties (there are several more counties in my original code)...</p>
  
  <pre><code>&lt;ul id="counties"&gt;
  
  &lt;li id="russell"&gt;&lt;a href="index.html"&gt;Russell&lt;/a&gt;&lt;/li&gt;
  &lt;li id="smyth"&gt;&lt;a href="index.html"&gt;Smyth&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>...and here is my CSS code...</p>
  
  <pre><code>#counties {
  background: url(./LINKS/counties_hover_map.png) no-repeat;
  width: 750px;
  height: 648px;
  position: relative;
  }
  #counties li {list-style: none; display: block; position: absolute;}
  #counties a {display: block; text-indent: -9999px; text-decoration: none;}
  
  #russell {left: 244px; top: 112px; width: 161px; height: 56px;}
  #russell a {height: 56px; border: none; outline: none;}
  #russell a:hover{background-position: 0px -680px;}
  
  #smyth {left: 510px; top: 164px; width: 144px; height: 56px;}
  #smyth a {height: 56px; border: none; outline: none;}
  #smyth a:hover {background-position: 0px -784px;}
  </code></pre>
  
  <p>...any insights would be greatly appreciated.
  Thanks.</p>