Solución al problema de los link en IExplorer usando AlphaImageLoader en fondos con transparencia png
Como esta temporada se llevan las transparecias hemos empezado a utilizar el filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() para tener como imagen de fondo de un div un png con transparencia, extensible o no, (próximamente lo describiremos detalladamente). Esto daba un problema muy serio de uso y es que los enlaces, input y demás elementos activos perdían toda actividad, no podíamos, seleccionar, pinchar o escribir.
Nuestro laboratorio I+D Friday I’m in blog ha descubierto una solución que por el momento ha funcionado en nuestras webs
Normas que deben seguir las capas para que no pierdan la actividad los link, input y demás elementos activos contenidos en ellas.
/* Definido el div */
#container_x {
width: 157px;
height: 28px;
padding-top: 8px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=’images/background.png’,sizingMethod=’fit’);
}
/*Con su correspondiente hack para Firefox */
div>#container_x {
background: url(../images/background.png) no-repeat;
}
Se debe cumplir lo siguiente:
- La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
- A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
- Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relativo.
Por ahora esto parece ser necesario y suficiente. Seguiremos informando.
July 15th, 2005 at 8:03 pm
Va a ser que sí.
July 28th, 2005 at 11:09 pm
[...] abilidad Rss Mejoras en soporte de CSS Soporte de PNG transparentes (que pena, con el truco que descubrimos) Leave a Reply Name (requerido) Mail [...]
March 30th, 2006 at 5:18 pm
No funciona del todo bien, ya que si la capa utiliza overflow:auto y tiene un scrollbar, el scrollbar no se puede utilizar más que con la rueda del ratón y la imagen o elemento activo que tenga posición relativa no se mueve bien, y si la tiene absoluta hace lo que le viene en gana.
Soluciones, please.
Gracias de antemano.
May 3rd, 2006 at 6:06 pm
Sinceramente, la mejor solución, esperar a que el explorer soporte las transparencias de los PNG… las diversas pruebas que hecho han acabado dando problemas, incluso colgando el explorer… por ahora, renuncio
May 14th, 2006 at 11:21 pm
Hola. Gracias por el artículo. Tengo un problema. El código va de maravilla en IE 6 pero en el IE 5.5 la imagenes png desaparecen al aplicarles el filtro. ¿que puede estar sucediendo? Gracias desde ya por cualquier ayuda.
May 15th, 2006 at 7:00 pm
En principio el Explorer 5.5 soporta ese filtro… no hemos probado el sistema este con el 5.5, quizás debíamos haber puesto la versión de explorer en el título.
La verdad… sigo insistiendo en que lo mejor es no usar estas técnicas, incluso me estoy arrepintiendo de haber publicado este artículo.
October 8th, 2006 at 2:32 am
Este truco es para ie para versiones 5.5 a 6 en versiones posteriores no lo soporta y no encontré ninguna solución en la 7 ya no hay problema.
October 8th, 2006 at 5:12 am
Fecha del post: 3 de junio 2005. Insisto, mejor no usar eso.
November 6th, 2006 at 1:48 pm
Hola compañeros,
yo utilizo para las trasparencias la función correctPNG, y me funciona perfectamente menos para las imagenes de los INPUT. ¿Alguien me puede decir como lo hago para que también se vean transparentes estas imagenes?
November 8th, 2006 at 9:48 pm
*{position:relative;}
#container_x {
width: 157px;
height: 28px;
padding-top: 8px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=’images/background.png’,sizingMethod=’fit’);
/*para todos los elementos que tengan el filter*/
position:static;
}
—-
el correctPNG es muy malo, hace lento al DOM, y no sirve para backgrounds.
Saludos!
December 13th, 2006 at 11:36 pm
Yo me he topado con tremendo problema y no se como solucionarlo. El hecho es que entre las pre-condiciones que se deben cumplir para que todo sirva está que las capas no pueden estar posicionadas absolutamente pero en la página que estoy desarrollando necesito posicionarlas de esa forma pues de lo contrario el diseño no sale. Alguna sugerencia de como lograr entonces las transparencias? EL problema es que tengo deshabilitado todos los elementos del formulario (INPUT, SUBMIT)
Salu2 y esperando respuestas ;(