Question

I’m doing something stupid … but, I just can’t see it. I’m trying to move my text offscreen to accommodate screen readers — and use the background image for presentation

<div class="memberstatus-clubmember">
    Clubmember
</div>


.memberstatus-clubmember {
   background: transparent url(/memberStatus/clubmember.png) no-repeat 0 0;
   display:block;
   width:193px; /* width of image */
   height:15px; /* height of image */
   text-indent:-999999px; 
}

Answer 1

Try adding position: absolute;

.memberstatus-clubmember {
   background: transparent url(/memberStatus/clubmember.png) no-repeat 0 0;
   display:block;
   width:193px; /* width of image */
   height:15px; /* height of image */
   text-indent:-999999px; 
   position: absolute;
}

This should help:

• CSS text-indent: An Excellent Trick To Style Your HTML Form