Button Sprites with text

Edited 4/30/2009: New findings see Button Sprites with Text Part 2 - An ANSWER!

--------------------------------------

Button Sprites. I love em. Changing a background of a text link instantly to make hover and stuff is awesome.

Though what is the proper solution when you want the words to be stylize in the graphic and you do not want to use the default text in the browser?

Unusually I find this version often. It will take the text in the span and position it -9999em to the left. Unfortunately you get the crazy active highlight that expands all the way to the left and out of view.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<span>Click Here</span>
</a>

I have also seen the use of the dreaded clear.gif or spacer.gif. This takes advantage of the alt text for accessibility. It seems right but what a waste of extra code and bandwidth even if it is only 43ish bytes.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<img src="/clear.gif" alt="Click Here" />
</a>


New Findings See Button Sprites with Text Part 2 - An ANSWER!
If you would like to make a comment make it at the newer posting.