Hover + linear-gradient (IE)

[LoGaNsF]

Hola,

Estoy creando una web personal, algo en plan curriculum, para colgar mis trabajos, mi curriculum y para que contacten conmigo que hay que currar jeje. La base de la web es Chrome y Firefox ya que estoy con HTML5 y algo de CSS3, y por mi pasaría completamente de IE, pero al ser una web para ofrecer mis servicios, no queda muy bien que no funcione en el navegador mas utilizado... por desgracia.

El caso es que tengo un menú fijo en la parte superior con un degradado (con CSS3 PIE ya logre que funcionara en IE) y para los botones, cuando me pongo encima del enlace le cambio el fondo por un degradado que hace un efecto como si se iluminara el texto por abajo. En Chrome y Firefox va perfecto, pero en IE no funciona, ni siquiera en el 9. Os pego el codigo:

Código HTML:

nav#menu ul li#home a:hover{
  color: #61ACE4;
  background: -webkit-linear-gradient(top, rgba(97,172,228,0) 30%,rgba(97,172,228,0.1) 60%,rgba(97,172,228,0.3) 100%);
  background: -moz-linear-gradient(top, rgba(97,172,228,0) 30%,rgba(97,172,228,0.1) 60%,rgba(97,172,228,0.3) 100%);
  background: -o-linear-gradient(top, rgba(97,172,228,0) 30%,rgba(97,172,228,0.1) 60%,rgba(97,172,228,0.3) 100%);
  background: -ms-linear-gradient(top, rgba(97,172,228,0) 30%,rgba(97,172,228,0.1) 60%,rgba(97,172,228,0.3) 100%);
  background: linear-gradient(top, rgba(97,172,228,0) 30%,rgba(97,172,228,0.1) 60%,rgba(97,172,228,0.3) 100%);
}

Cada enlace tiene un color, este es de uno de ellos. Como no es compatible con CSS3 pues usando CSS3 PIE logre hacer el degradado para el menu, pero en los botones no funciona. Esto es lo que uso para el degradado en IE:

Código HTML:

...
-pie-background: linear-gradient(#F3F3F3 20%, #E6E6E6 100%);
behavior: url(PIE.htc);
...

Se lo añado al primer estilo indicado, pero no hace nada. He estado buscando y he leído problemas con hover en IE8 e IE7, no se si esto tiene que ver. Lo que si me cambia es el color de la letra, pero el fondo no.

A ver si me podéis echar una mano, me gustaría que al menos eso se viese igual en todos los navegadores o por lo menos en IE9.

Gracias.

[alexk]

Suponiendo que el codigo del css para el degradado y la ruta del "PIE.htc" son correctas prueba con
#home a{position:relative}
(Ojo con tus selectores los ID no se repiten así que no hace falta indicar lo anterior a #home, te recomiendo .clases para no liarte)
Sino prueba con usar el pie con js

[LoGaNsF]

Si, la ruta es correcta, ya te digo que uso el degradado en otro sitio y funciona en todos, hasta IE7 (mas atrás no he probado).

He puesto todos los enlaces con "position: relative" pero nada, no funciona.

Los IDs no están repetidos, si tiene todo el tocho ese es por distinguirlo mejor a simple vista, que he estado probando mucho y tengo código comentado, algún selector parecido, etc.

A ver si pruebo con js, aunque prefería usar solo CSS para esto, pero con IE parece que no se puede negociar jeje :P . A ver si alguien sabe que puede ser, es muy raro que no me lo permita cuando ya lo he usado para otra cosa.

[furoya]

Ese .htc es javascript. Lo que hace es leer el CSS3 y escribir con sus valores el gradiente para IE.
Porque Internet Explorer tiene su degradado propietario. En este sitio pusimos muchos ejemplos, y la web tiene muchos más. Busca sobre "internet explorer filter gradient OR alpha" y hazlo con CSS.

[LoGaNsF]

Si, conozco el filter para IE, pero ni de lejos queda igual que con CSS3, al menos el gradient que tengo yo hecho. Pero el caso es que no me funciona con el hover (el filter si, lo he probado) y si con otro. Una imagen:



Ese degradado de fondo de la barra se ve en todos los navegadores, el que me falla es el que se ve en el botón inicio. Con filter consigo uno, pero ni de coña se asemeja a ese.

Probare con JavaScript e imágenes. Si en IE no se ve igual pues que cambie de navegador que es lo que tiene que hacer XD . Aunque si alguien tiene la solución se lo agradezco.