Transparency en Internet Explorer 6

Toda persona que jamás se haya hecho una plantilla para Joomla, o un diseño web en general, conoce la sensación: finalmente, después de horas o días de trabajo que has creado algo que parece grande ... hasta que comprobar cómo se ve en otros navegadores. Una plantilla que se ve muy bien en un navegador puede ser un desastre total en otro navegador y que puede resultar dejar un trabajo para solucionar este problema.
A veces la fijación del mismo puede tomar tanto tiempo como la creación de la propia plantilla. Por eso es importante mantener las diferencias entre los navegadores en cuenta, al crear su plantilla. Muchos diseñadores web a partir de cometer el error de empezar a pensar en esto cuando el diseño está casi terminado. Esto añade trabajo extra a su diseño que podrían haberse evitado. Y cuando se enfrentan a una fecha límite, se le dará algunos dolores de cabeza. Así que he decidido escribir una serie de artículos acerca de estas diferencias entre navegadores que usted debe pensar.

Este primer tema es la transparencia. En primer lugar, vamos a explicar qué es exactamente lo que el problema es con la transparencia. Al igual que con todos los problemas, es importante que usted comprender cabalmente el problema antes de resolverlo.

Formatos de imagen y su transparencia

Hay un montón de formatos de imagen. Uno de los criterios para decidir qué formato debería usar, es la transparencia. Vamos a comenzar con un ejemplo. Abajo puedes ver dos imágenes. La izquierda es parte de una puesta de sol es la imagen y el fondo que quiero utilizar. El derecho es una «última instancia Joomla 'logo que quiero usar en mi diseño web en la parte superior del fondo. Este logotipo deberá tener un fondo transparente y la mayoría de líneas externas del logotipo son semi-transparente.

Sobre la primera cuestión a preguntarse para cada imagen que desea usar, que es el formato que debe usar. Para el logotipo, echemos un vistazo a las opciones en términos de la transparencia que necesitamos.

jpg: el formato JPEG, simplemente no es compatible con la transparencia. Si quisiera hacer mi logotipo en formato jpg y colóquelo en la parte superior del fondo, el fondo desaparecería, como se puede ver en la imagen que aparece a continuación. Jpg para que claramente no es lo que quiero.

gif: GIF soporta la transparencia. Sin embargo, se apoya en una forma bastante simple: es un píxel, ya sea transparente o no lo es. No entre en valores. Aunque esto puede ser correcto para la mayoría de las situaciones, por lo que queremos aquí no es bueno. El exterior semi-transparente las líneas no se puede visualizar como queremos y que obtendrá un resultado como se muestra a continuación. Por lo tanto, gif no es bueno tampoco.

png: El formato PNG es el más reciente de las tres y tiene el mejor soporte de transparencia. Apoya el llamado canal alfa. Esto significa que usted puede tener cualquier transparencia entre 0 y 100%. Grandes, exactamente lo que queremos como se puede ver en el ejemplo a continuación.

Internet Explorer 6

Ahora sabemos que el formato que queremos usar, llegamos al verdadero problema: Internet Explorer 6 no es compatible con el canal alfa. En Internet Explorer 6 que se parecerá a la imagen que aparece a continuación, que es, por supuesto, no queremos wat.

Vamos a echar un vistazo a las posibles soluciones.

Solución 1: plugins

La manera más sencilla sería la de instalar una extensión. Hay dos extensiones existentes, que debería resolver el problema (PNG Ultimate Fix Plugin y CorrectPNG). Yo lo he probado tanto en Joomla 1.5 (con legado plugin habilitado), pero ninguno de ellos está trabajando para mí. Usted puede intentar hacer usted mismo, tal vez usted tendrá mejor suerte.

Solución 2: CSS hack

No es un fácil css hack para permitir un png de fondo con la transparencia. Aunque esto no es lo que estamos buscando en este ejemplo, vale la pena mencionar. Si usted tiene un fondo transparente, esto es lo que está buscando! Sólo hay que poner siguiente fragmento de código inyour css:

#yourdiv
 {
	width:433px;
	height:133px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_logo.png');		
}


html>body #yourdiv
{
	background: url('your_logo.png') no-repeat 0 0;

}

The first part will show the background in IE6. The second part is for the webbrowser which understand inheritance like Firefox.

Solution 3: png fix

For this third solution, you'll need a piece of javascript. Just put the following in the header of your template:

Por último, esta es una solución que funciona y lo mejor es que sólo tenemos que poner una vez en la cabecera y se trabaja para todos los png en nuestra plantilla. Esto, junto con la solución 2 de la imágenes de fondo, es todo lo que es necesario que usted tenga todas las posibilidades transparencia en IE6

View , Navigation and Search

Transparency en Internet Explorer 6

Transparency en Internet Explorer 6