CSS - boton con id

Hola, tengo que hacer un botón con una imagen de fondo para off y otra para on (iguales en alto y ancho) y que el texto en formato texto lo pueda manejar mediante px para subirlo o bajarlo en ese espacio. Con clases normales sale, pero con ids no lo logro:

<table id="barra" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="inicio"></td>
<td><a href="xxx.htm" class="off"><span>Xxx</span></a></td>
<td class="espacio"></td>
<td><a href="sss.htm" class="on"><span>Sss</span></a></td>
<td class="final"></td>
</tr>
</table>

La imagen la coloca bien, con el estilo: #barra a.on {...} (le he puesto el ancho de la barra y también he probado con el ancho del botón que es un poco más pequeño), pero el texto no obecede.
He probado poner esta clase: #barra a.on span {...} para el texto y tampoco hace caso.

Cuando cambio padding o margin, sube o baja la imagen de la barra, pero no el texto.
Sabeis cómo se hace para que obedezca?
Podeis pasarme un ejemplo?

Perdonad, ya lo he solucionado. Gracias de todas formas.