chrome y firefox no muestran imagen con hover

[warperer]

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.

[Impostor]

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

Saludos¡¡

[warperer]

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!

[warperer]

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.

[daPhyre]

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.