尝试使用CSS Sprites减少HTTP请求，但现在图像不能正常显示

Question

To try and reduce the number of HTTP requests I have combined groups of related images into sprites.

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.

Here is the new markup and css (previous markup just had individual img tags wrapped in the anchor tag):

<div id="footer-flags">
    <ul>
        <li class="countryName">Region: </li>
        <li class="active countryFlag" id="uk"><a title="United Kingdom" href="javascript:void(0);"></a></li> 
        <li class="countryFlag" id="us"><a title="United States" target="_blank" href="http://www.us-site.us"></a></li> 
        ... 5 more
    </ul>
</div>

CSS is as seen below:

#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;
}

The sprite image is 14px x 77px (so the flags are positioned on top of each other).

Here is a fiddle if anyone prefers it: http://jsfiddle.net/WNXNz/4/

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, ie the images aren't clickable.

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.

Answer 1

CSS Sprites shouldn't be used for HTML img. You now have empty links : this is bad for accessibility and SEO.

Accessibility: you can check the relevant WCAG 2.0 Technique H30: Providing link text that describes the purpose of a link for anchor elements
People that disable images, CSS, use a screen reader or use the High Contrast mode in Windows won't be able to know there's a link there or won't know what it can possibly do.

SEO: I'm not a SEO specialist, all I can tell is that searchbots will have to guess from the destination what is the purpose of your link, that's not by far the best way to rank well in search engines.

That said, CSS sprites are great for background images :)