PNG transparentes en IE6

No es nada raro que estemos creando una página con css y en el momento de probarla en el odioso Internet explorer 6 nos damos cuenta que no salen los png transparentes. Aquí es cuando empezamos a buscar como locos la solución a este problema.

Pues bien, existen varias posibilidades, entre ellas archivos javaScript; que para mí no fueron útiles, quizás porque no seguí correctamente las instrucciones; sin embargo encontré este código css el cual me funcionó perfectamente, por esto quiero compartirlo con ustedes:


#capaPng {
height:300px;
width:400px;
background-image:url(imagenes/img.png) !important;
background-image:none;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Es sumamente importante poner la ruta absuluta para la imagen PNG en la línea "filter", por otro lado y no menos importante, es colocar la altura (height) y anchura (width).

Con esto seguro ya podrá trabajar imágenes PNG. Sin embargo otro problema muy común con estas imágenes PNG es cuando las queremos como fondo en nuestros botones o incluso en un input, ya que los botones dejan de ser pulsables y el input parece ser una imágen más. La solución es la siguiente:

En el css para que los links con fondo PNG en IE6 funcionen 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 relative.



Gracias ha:
http://www.tripix.net
http://dixso.net