pisicion de background de una estiqueta <A> ????

hola a todos...
Miren tengo este codigo
para unos link dentro de un menu

el menu son solo etiquetas <a>
con una class distinta:

Código :

    
<table width="94%" border="0" cellspacing="0" cellpadding="0" class="menu">
      <tr>
        <td><a href="#" class="_inicio">&nbsp;</a></td>
        <td><a href="##" class="_rider">&nbsp;</a></td>
        <td><a href="###" class="_clubs">&nbsp;</a></td>
        <td><a href="####" class="_destacados">&nbsp;</a></td>
        <td><a href="#####" class="_eventos">&nbsp;</a></td>
        <td><a href="######" class="_spots">&nbsp;</a></td>
        <td><a href="#######" class="_foro">&nbsp;</a></td>
        <td><a href="########" class="_videos">&nbsp;</a></td>
      </tr>
</table>

Existe solo UNA imagen para todo el menu
y esta la posiciono segun corresponda
(la imgen tiene palabras "inicio noticias etc...")
( y en la misma imagen abajo salen las mismas palbras con rojo para el hover)

Código :

.menu a{
display: block;
height:32px;
background:url(img/menus.png);
}
a._inicio{
display: block;
height:32px;
background:url(img/menus.png);
width:86px;
}
a._rider{display: block;
height:32px;
background:url(img/menus.png) -86px 0px;
width:77px;
}
a._clubs{display: block;
height:32px;
background:url(img/menus.png) -163px 0px;
width:65px;
}
a._destacados{display: block;
height:32px;
background:url(img/menus.png) -228px 0px;
width:122px;
}
a._eventos{display: block;
height:32px;
background:url(img/menus.png) -350px 0px;
width:86px;
}
a._spots{display: block;
height:32px;
background:url(img/menus.png) -436px 0px;
width:70px;
}
a._foro{display: block;
height:32px;
background:url(img/menus.png) -506px 0px;
width:60px;
}
a._videos{display: block;
height:32px;
background:url(img/menus.png) -566px 0px;
width:76px;
}

a:hover._inicio{display: block;
height:32px;
background:url(img/menus.png) 0px -34px;;
width:86px;
}
a:hover._rider{display: block;
height:32px;
background:url(img/menus.png) -86px -34px;
width:77px;
}
a:hover._clubs{display: block;
height:32px;
background:url(img/menus.png) -163px -34px;
width:65px;
}
a:hover._destacados{display: block;
height:32px;
background:url(img/menus.png) -228px -34px;
width:122px;
}
a:hover._eventos{display: block;
height:32px;
background:url(img/menus.png) -350px -34px;
width:86px;
}
a:hover._spots{display: block;
height:32px;
background:url(img/menus.png) -436px -34px;
width:70px;
}
a:hover._foro{display: block;
height:32px;
background:url(img/menus.png) -506px -34px;
width:60px;
}
a:hover._videos{display: block;
height:32px;
background:url(img/menus.png) -566px -34px;
width:76px;
}

asi que con ese CSS pretendo mover la imagen de fondo segun el hover
pero... en don IE no me funciona
como era de esperarse en el señor firefox me resulta y sale todo perfecto
pero en IE sale "Noticias noticias Noticias noticias Noticias noticias"
haciendo caso solo a la primera instruccion de background...

No entiendo

Quieres usar este sistema con imágenes porque...? Me lo pregunto porque se podría hacer sólo con texto y cambiar el color con CSS.

De todas maneras, te pongo este link a ver si te sirve:
CSS Image Rollovers