need to display background image of link inline with text links correctly

I want to display the face开发者_运维技巧book-footer-rect.png as the link, and provide wording in the link tag for screen readers.

<a href="http://facebook.com/ourpage" title="Join us on Facebook" rel="external" class="facebook-footer">Join us on Facebook</a>

Example html of the links:

<div class="footer-links">
 <p>
  <a href="link">Link 1</a>
  <a href="link">Link 2</a>
  <a href="link">Link 3</a>
  <a href="link">Link 3</a>
  <a href="http://facebook.com/ourpage" title="Join us on Facebook" rel="external" class="facebook-footer">Join us on Facebook</a>
 </p>
</div>

CSS for footer-links and facebook-footer

.footer-links { line-height:1.9em; text-align:center; margin: 0; }

.footer-links a:visited, .footer-links a:link { display:block; padding:7px; background-color:#216e4f; text-decoration:none; display:inline; }

.footer-links p {
 margin:0 0 10px 0;
}

.footer-links a:hover { background-color:#337a5d; text-decoration:none; display:inline; }

.footer-links a.facebook-footer:link,
.footer-links a.facebook-footer:visited { 
 background: url('/images/uploads/images/facebook-footer-rect.png') no-repeat left top;
 height:28px;
 width:81px;
 display: inline;
 text-decoration: none;
 overflow: auto;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

Screenshot of what it looks like:

w/ facebook-footer display: block; http://cl.ly/4TBY

w/ facebook-footer display:inline; http://cl.ly/4Twi

this is what I want it to look like: http://cl.ly/4TVX (photoshopped this)

UPDATE: I added display: inline-block; and vertical-align:top; with someone's suggestion and it now looks like this: http://cl.ly/4Tu8

CSS now for .facebook-footer

.footer-links a.facebook-footer:link,
.footer-links a.facebook-footer:visited { 
 background: url('/images/uploads/images/facebook-footer-rect.png') no-repeat;
 height:28px;
 width:81px;
 display: inline-block;
 text-decoration: none;
 vertical-align: top;
 overflow: auto;
 text-indent: -10000px;
 font-size: 0;
 line-height: 0;
}

demo of the code http://jsfiddle.net/sHSYM/

Yes! Got it... it was some puzzling, but this one with inline-block should work.

Remember that inline-block isn't supported with all major browsers (IE7 is incomplete).

.footer-links a.facebook-footer:link, .footer-links a.facebook-footer:visited {
    /* Set to repeat, so the blue can come at the bottom as well, but is not needed.*/
    background: url("http://i56.tinypic.com/339hu0l.png") repeat scroll 0 0 transparent;
    display: inline-block;
    font-size: 1.9em;
    height: 1em;
    padding: 0; /* No padding, only tested this one in FF and IE8 */
    vertical-align: top; /* bottom seems to work as well*/
    width: 81px;
}

.footer-links p {
    margin:0 0 10px 0;
    overflow:hidden; /* important change, makes them all of the same size */
}

Check your jsFiddle here: http://jsfiddle.net/sHSYM/1/

try display: inline-block; and possible need of vertical-align property.

edit Checking the live example you made, you can add position:relative & bottom:2px; so the top of facebook image and the links will be in the same horizontal position. Another option, instead position:relative; could be margin-top:-2px;.