ok prueba esto:
Código HTML:
//ESTILOS CSS
.contact {
text-align: right;
list-style: none;
}
.contact li {
width:ancho;
height:alto;
background: url(img/envelope_grey.png) no-repeat bottom left;
}
.contact li:hover {
background: url(img/envelope_orange.png) no-repeat bottom left;
}
.contact li a:link,.contact li a:hover,.contact li a:visited {
width:ancho;
height:alto;
display:block;
}
//CODIGO HTML
<div id="contactNavi">
<ul class="contact">
<li><a href="contacto.html"> </a></li>
</ul>
</div> con esto hara lo que quieres, las etiquetas <A> de la lista "contact" tendran el ancho y alto predefinido (en el css tienes que cambiar los dos width y los dos height por el tamaño de la imagen de fondo), asi que no importara si estan vacios o contienen texto, ya tendran un tamaño definido y para tus fines no necesitas poner texto ya que lo que vera el usuario sera la imagen de fondo que ya dice contacto, asi que basta con dejarle un espacio a la etiqueta.
Me cuentas si te funciono ;)