a:hover en imagen

EmmanuelOA · #1 (**permalink**) 06/02/2007, 21:35

Miren esta página: http://www.eoran.com/ca/en/
Necesito que para el submenú, las imágenes de las cartas blancas se vuelvan naranjas en hover.
No quise hacerlo con rollover porque sería mucho javascript... tonces se me ocurrió dejar el centro de la carta transparente y cambiarle el background-color en a:hover. Pero la imagen se "alza" y entonces se queda un espacio en blanco (es decir, la carta se llena de naranja como 3/4) y el fondo también cambia abajo de la carta...
¿Cómo arreglo eso pa que la carta se llene totalmente de naranja y no quede nada debajo?

Gracias de antemano!!

PD. Este problema existe en la página vista en Safari. Vista en IE, hay otro problema con las imágenes png (agregué un javascript para que IE identificara las imgs png pero ahora, aunque las muestra, encima el símbolo de que la imagen no se encontró... si entran desde IE verán a qué me refiero)

Mikmoro · #2 (**permalink**) 07/02/2007, 03:54

En el caso de firefox, creo que basta con que le pongas a ese a:hover un tamaño de letra más bien grande, como font-size: 20px;.

En el caso de explorer, creo que sencillamente el javascript no te funciona bien.

Podrías probar con este otro:

http://www.twinhelix.com/css/iepngfix/

Yo lo he probado y funcina perfectamente.

Mikel.

EmmanuelOA · #3 (**permalink**) 07/02/2007, 13:03

Gracias!! Ahora las cartas se llenan completamente de naranja pero les sigue quedando un borde debajo... intenté margin-bottom:0 y max-height:21px (porque es el tamaño del pnh) pero no funcionan...

Mikmoro · #4 (**permalink**) 07/02/2007, 13:17

¿Te refieres a un pequeño bordecito blanco arriba y abajo dentro de la carta? Es que creo que el png no lo tienes completamente transparente. Míralo bien.
Si no es eso ya dirás.

Mikel.

EmmanuelOA · #5 (**permalink**) 07/02/2007, 13:26

No, me refiero a un bordecito naranja debajo de la imagen, no dentro (dentro de la carta se ve perfecto)... tal vez en FF y en IE no se vea como te digo pero en Safari sí (lo siento, en estos momentos no tengo a la mano una PC para saber cómo se ve la página en ella...

)

Mikmoro · #6 (**permalink**) 07/02/2007, 13:31

Ah, vaya. En IE ni FF veo ese borde que dices, y no puedo mirarlo en safari, al contrario que tú

.
Lo siento.

Mikel.

EmmanuelOA · #7 (**permalink**) 07/02/2007, 13:53

Bueno, al menos eso me da la certeza de que en IE y en FF se ve bien. Gracias!

webosiris · #8 (**permalink**) 07/02/2007, 14:53

la vi con konqueror (usa el msimo motor que el Safari) y efectivamente se ve un borde debajo... quizas puedas probar a ponerle padding:0 (o quitar el padding obttom que tenes en el li)... pero no estoy seguro, lo siento... igual tampoco se ve mal con ese borde..

EmmanuelOA · #9 (**permalink**) 07/02/2007, 15:59

Ya había probado eso también y no funcionó... pero como dices, no se ve mal de todas formas. Así lo voy a dejar.