Foros del Web » Creando para Internet » CSS »

chrome y firefox no muestran imagen con hover

Estas en el tema de chrome y firefox no muestran imagen con hover en el foro de CSS en Foros del Web. Hola, He programado el siguiente código en mi web: <style>#web-buttons-idjptl1 a{display:block; color:transparent;} #web-buttons-idjptl1 a:hover{background-position:left bottom;} </style> <center><table id="web-buttons-idjptl1" width=0 cellpadding=0 cellspacing=0 border=0><tr> <td style="padding-right:0px" title ...
  #1 (permalink)  
Antiguo 22/02/2010, 13:42
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
chrome y firefox no muestran imagen con hover

Hola,

He programado el siguiente código en mi web:

<style>#web-buttons-idjptl1 a{display:block; color:transparent;} #web-buttons-idjptl1 a:hover{background-position:left bottom;} </style>
<center><table id="web-buttons-idjptl1" width=0 cellpadding=0 cellspacing=0 border=0><tr>
<td style="padding-right:0px" title ="Empezar a ahorrar ahora">
<a href="#" title="Empezar a ahorrar ahora" style="background-image:url(images/boton gris.png);width:300px;height:159px;display:block;" ><br/></a></td>
</tr></table>


El resultado es un bonito botón que cambia con el el hover. Pero sólo funciona con IE. Eso es lo que me está dejando flipafo.

FF y Chrome no me muestra ninguna imágen. Me deja el hueco en blanco.

Alguna idea?? Gracias.
  #2 (permalink)  
Antiguo 22/02/2010, 14:28
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: chrome y firefox no muestran imagen con hover

Puede que sea debido a la forma en la que vicnulas la imagen, para descartarlo, pon la ruta completa, incluidos http:

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 22/02/2010, 14:57
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: chrome y firefox no muestran imagen con hover

Gracias por la pronta respuesta. He realizado ese cambio pero sigue sin verse la imagen ni en Firefox ni en Chrome, pero sí en IE.

Debe de ser alguna incompatibilidad con el style, aunque también puede ser que me coja las declaraciones a: y a hover desde el css.

Chrome me dice esto cuando inspecciono la imagen:

display: block;
height: 159px;
width: 300px;
inline stylesheet
#web-buttons-idjptl1 a:hover
background-position: 0% 100%;
inline stylesheet
#web-buttons-idjptl1 a
color: transparent;
display: block;
/shop/catalog/stylesheet.css
a:hover
color: #ABD;
text-decoration: underline;
/shop/catalog/stylesheet.css
a
color: black;
text-decoration: none;
user agent stylesheet
a:-webkit-any-link
color: -webkit-link;
cursor: auto;
text-decoration: underline;


Y Firefox no ve el la dirección de la imagen.

<a style="width: 300px; height: 159px; display: block;" title="Empezar a ahorrar ahora" href="#"><br></a>

Por algún lado he visto que puede tener que ver con la declaración "display : block"

Estoy atascado con esto.

Help!
  #4 (permalink)  
Antiguo 22/02/2010, 15:39
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: chrome y firefox no muestran imagen con hover

Solucionado. Después de intentar mil cosas. Como siempre era lo más tonto. He cambiado el nombre de la imagen para de boton gris.png a botongris.png y ya funciona perfectamente.

Espero que a alguien le puede sercir y ahorrar unas horas.

Un saludo.
  #5 (permalink)  
Antiguo 22/02/2010, 17:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: chrome y firefox no muestran imagen con hover

El detalle es que en css, las palabras con espacios deben ir entre comillas simples:

background-image:url('images/boton gris.png');

Claro, IE para variar, no hace las cosas como es debido. A veces beneficia como en este caso, pero la mayoría de las veces solo perjudica

De cualquier forma, es una buena costumbre siempre evitar los espacios en los nombres de los archivos en internet para evitar problemas como este o los %20 en los enlaces. Saludos.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: chrome, firefox, hover
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 08:20.