Text popping through on image replacement

Question

I've used a standard image replacement technique for one of my links, (the nested span technique) but as the image is round & transparent at the edges, the underlying text link is popping through.

Heres my screenshot that explains what I mean.

http://dl.getdropbox.com/u/240752/peepo.gif

Whats the best way to hide this text? I don't want to use display:none as its bad practice, and I had a feeling that setting the text size to 0 is also a no-no?

Can anyone suggest a good practice technique, thats not going to get me tried to a tree by google for cloaking.

Many thanks.

Answer 1

The easiest solution would be to employ another image replacement techique, e.g. give the text a very large text-indent value. Refer to Mezzoblue for a comprehensive list of techniques along with their trade-offs.

Alternatively, you could provide the display: none property in the @media screen section of the stylesheet. This means it shouldn't get applied for screen readers (since these should be of media type aural). However, I can't verify if current screen readers really have this (expected) behaviour.