Understanding CSS sprites and links - css

Question

I have been researching how to use CSS sprites as image links, but I can't figure this out. I have a PNG (here: ) that has two images in it (for simplicity). I want each image to be act as an icon that can be linked to an external website (Twitter and Facebook). I set up my CSS like this:
CSS
#authorpage-links ul {
list-style-type:none;
}
#authorpage-links ul li {
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
#authorpage-links ul li.twitter {
background: url("/links-authorpage1.png") no-repeat 0 0;
width: 20px;
height: 14px;
}
#authorpage-links ul li.facebook {
background: url("/links-authorpage1.png") no-repeat -21px 0;
width: 14px;
height: 14px;
}
...and my HTML like this:
HTML
<ul id="authorpage-links">
<li id="authorpage-links" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-links" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
Now, 2 questions:
1) Is using a list to display these images the best way or should I use div's?
2) Is this an issue with my CSS IDs and classes?
Any help is greatly appreciated.

Answer 1

Based on a revision of your CSS (problems that I'll come to, later) to the following:
#authorpage-list {
list-style-type: none;
}
#authorpage-list li {
float: left;
}
#authorpage-list li a {
background-color: transparent; /* I broke the background down into individual parts */
background-image: url(http://i.stack.imgur.com/ta3Va.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 15px;
height: 15px;
display: block; /* in order that the a elements could be assigned a width/height */
border: 1px solid #f90; /* for diagnostic purposes while working on this, adjust to taste */
}
#authorpage-list #authorpage-facebook-link a {
/* a specific selector, in order to be more specific than the previous
selector which styled the defaults for the a elements in this position */
background-position: -21px 0;
}​
And amending your HTML to the following:
<ul id="authorpage-list">
<li id="authorpage-twitter-link" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-facebook-link" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
I came up with this: JS Fiddle demo.
​
CSS problems
This is the biggest no-no insofar as HTML goes (or so far as I've ever been able to see, it's even worse than the blink tag): you have multiple examples of the same id in your HTML. An id must be unique within the document. If not, you have invalid HTML. Which causes problems with CSS, with JavaScript and...it's just bad.
If you have multiple elements that need to share a property/style, or whatever, use a class, not an id.
Your selectors. #authorpage-links ul should match a ul element within an ancestor element of id="#authorpage-links". The ul is the element with that id. I'll ignore that its child elements also had that id, since I think I've covered that part. All your other CSS started off that base, which wasn't accurate, and so didn't work.

Answer 2

Your <li> elements may be sized to 14x14, but you've got nothing in the <a> tags, so those'll shrink down to a 0x0 area, effectively making your list elements clickable areas invisible. You should probably put a space into the anchor tag, so there's SOMETHING to push them open, e.g.
<a target="_blank" href="http://facebook.com/"> </a>
^^^^^^

Answer 3

Your a link need to have a size. I did so in making the a's have a clickable area. Since your lis don't need a size i gave the size to the a links.
Replace your li css with:
ul#authorpage-links li a {
display: inline-block;
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
ul#authorpage-links li.twitter a {
background-position: 0 0;
width: 20px;
height: 14px;
}
ul#authorpage-links li.facebook a {
background-position -21px 0;
width: 14px;
height: 14px;
}
Also remove the id attribute from your lis.
"... fantastic answer ..." - Sparky672