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:
Cita: .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.
Cita: <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