Link que modifica una imagen css

[principiantedelphp]

Hola amigos:
Hace dos dias estoy con este problema. Para resumir, 1. Cargo una imagen con css; 2. Uso un div para mostrarla como fondo (HTML); 3. En este div pongo otra imagen y un texto con un link.
1. Cargo una imagen con css y defino el texto de la caja:

.barracategoria{
width: 190px;
height: 25px;
background-image:url(../images/barracategoria.gif);
font-family: "Times New Roman";
font-size: 18px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-align:left;
color: #FFFFFF;
background-repeat: no-repeat;
display:block;
}

.exacto{
margin: 0;
border: 0;
padding: 0;
float: left;
word-wrap: break-word;
overflow:hidden;

}

2 y 3. Uso un div para mostrar la imagen como fondo del div, agrego otra imagen y un texto con un link.

<div class="barracategoria exacto"><img src="http://www.forosdelweb.com/f53/images/cara.gif" alt="Caras" width="24" height="20" border="0" title="Caras"/><a href="http://www.forosdelweb.com/f53/caras.php"><span class="barracategoria">CARAS</span></a></div>

Este contenido se ve perfectamente bien en Firefox, Opera y Google Chrome, pero, como siempre, la novedad la da IE. En este querido explorador, desaparecen la palabra "CARAS", por lo que no hay link.
Tuve que agregar (como ven en el codigo CSS) al final la propiedad "display:block;". Aca ocurre algo extraordinario: cuando no coloco "display:block;", en todos los exploradores se carga toda la imagen, pero duplicada (se ve la primera mitad, dos veces), esto supongo que es por la propiedad inline que esta predefinida. Cuando coloco "display:block;" se ve excelente en todos, menos en IE. Sería algo así:

OTROS EXPLORADORES: (atras se ve la imagen de fondo)

IMAGEN TEXTO


IE

IMAGEN (no se ve el texto ni su link asociado)

¿En donde estoy errando? Gracias y espero poder solucionar este problema

[principiantedelphp]

Encontre algo (que no es mucho pero es algo):

.exacto{
margin: 0;
border: 0;
padding: 0;
float: left;
word-wrap: break-word;
overflow:hidden;
}

Lo que hice, para probar fue el overflow:hidden lo saque y aquí resulta que en los demas exploradores, todo bien, pero en IE pasa lo siguiente:

IMAGEN (con la imagen de fondo)
TEXTO-LINK (con la imagen de fondo)
IMAGEN2
TEXTO-LINK2

Es decir, que las imagenes se repiten y eso se ve ahora. En síntesis, toma la imagen de fondo y agrega la imagen común. Luego vuelve a colocar la imagen de fondo abajo y coloca el texto con el link. Es decir, duplica la imagen CSS de background. (Ejemplo en Firefox salen 5 links con las imagenes y en IE salen 10 imagenes).
Bueno, gracias