title: Trying to Reduce HTTP Requests With CSS Sprites But Now Images Don't Appear Properly
body: <p>To try and reduce the number of HTTP requests I have combined groups of related images into sprites.</p>
  
  <p>I understand the methodology behind it but I can't seem to get it to work correctly for the ones I am working one and would love some help.</p>
  
  <p>Here is the new markup and css (previous markup just had individual img tags wrapped in the anchor tag):</p>
  
  <pre><code>&lt;div id="footer-flags"&gt;
      &lt;ul&gt;
          &lt;li class="countryName"&gt;Region: &lt;/li&gt;
          &lt;li class="active countryFlag" id="uk"&gt;&lt;a title="United Kingdom" href="javascript:void(0);"&gt;&lt;/a&gt;&lt;/li&gt; 
          &lt;li class="countryFlag" id="us"&gt;&lt;a title="United States" target="_blank" href="http://www.us-site.us"&gt;&lt;/a&gt;&lt;/li&gt; 
          ... 5 more
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS is as seen below:</p>
  
  <pre><code>#footer-flags {
      float:right;    
  }
  #footer-flags ul {
      list-style-type: none;
      margin:-3px 0 0 0;
      overflow:hidden;
      padding:0;
  }
  #footer-flags ul li {
      background-image: url(/img/flags/flags-sprite.jpg);
      height: 11px;
      width: 14px;
      float:left;
      padding-left:5px;
      padding-top:3px;
  }
  #footer-flags #de {
      background-position: 0px 0px;
  }
  #footer-flags #fr {
      background-position: 0px -11px;
  }
  #footer-flags #hr {
      background-position: 0px -22px;
  }
  #footer-flags #ie {
      background-position: 0px -33px;
  }
  #footer-flags #nl {
      background-position: 0px -44px;
  }
  #footer-flags #uk {
      background-position: 0px -55px;
  }
  #footer-flags #us {
      background-position: 0px -66px;
  }
  
  #footer-flags ul li.active {
      background:url("/img/flags/flag-highlight.png") no-repeat scroll left top transparent;
      margin-right:-5px;
      padding:3px 5px 5px;
  }
  </code></pre>
  
  <p>The sprite image is 14px x 77px (so the flags are positioned on top of each other).</p>
  
  <p>Here is a fiddle if anyone prefers it: <a href="http://jsfiddle.net/WNXNz/4/" rel="nofollow">http://jsfiddle.net/WNXNz/4/</a></p>
  
  <p>The error itself is just that the flag images are strewn all over the place and the links don't seem to be there aswell, i.e. the images aren't clickable.</p>
  
  <p>From what I can see I think I have implemented it correctly but it's likely my CSS is a nightmare because I have only had to use a sprite before and it was just for one image.</p>