Foros del Web » Creando para Internet » CSS »

Link que modifica una imagen css

Estas en el tema de Link que modifica una imagen css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2010, 17:23
Avatar de principiantedelphp  
Fecha de Ingreso: febrero-2010
Mensajes: 160
Antigüedad: 7 años, 9 meses
Puntos: 1
Link que modifica una imagen css

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

Última edición por principiantedelphp; 20/03/2010 a las 17:39
  #2 (permalink)  
Antiguo 20/03/2010, 17:39
Avatar de principiantedelphp  
Fecha de Ingreso: febrero-2010
Mensajes: 160
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: Link que modifica una imagen css

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

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

Etiquetas: link
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:50.