comparte el articulo 

Problemas de maquetación con Internet Explorer 6

Actualizado el 16/04/2010 < > 0 Comentarios

Resumen: Las diferencias entre Internet Explorer 6 y el resto de los navegadores, constituye un verdadero reto para quienes tienen que hacer maquetación de páginas web.

Antes de continuar avanzando en la forma en que se debe hacer la maquetación una página web, debemos tener en cuenta algunos problemas que se suscitan en la visualización de las páginas web por parte de diferentes navegadores.

Durante el proceso de maquetación de una página web, se emplean una serie de normas que dictadas por la W3C (Consorcio World Wide Web) y que constituyen los estándares de los lenguajes empleados en la web (CSS, HTML, XHTML). Estas normas sirven no solo para que los diseñadores de páginas web realicen del mismo modo su trabajo, sino además para que todos los navegadores (programas que interpretan los códigos generados por los diseñadores empleando estos lenguajes) también lo hagan de la misma forma.

Sin embargo, y a pesar de que en las reuniones de trabajo de la W3C participan todos los involucrados, uno de los inconvenientes más severos con los que se han enfrentado los diseñadores de páginas web ha sido la diferencia existente en la forma en que los navegadores (fundamentalmente Internet Explorer de Microsoft) interpretan estos códigos.

Dada la hegemonía que durante mucho tiempo ejerció Microsoft sobre el mercado de los navegadores con sus versiones 5, 5.5 y 6 de su Internet Explorer, muchos diseñadores dejaron de lado los estándares para diseñar páginas que se vieran bien en IE. Sin embargo, con el tiempo el empleo de los navegadores se ha diversificado bastante y los principales buscadores (sobre todo Google) han hecho hincapié en la importancia del respeto de los estándares, por lo que esta tendencia se ha revertido y hoy en día se considera que una buena página web debe ser válida de acuerdo a los estándares de la W3C.

Si bien es cierto que Microsoft ha hecho una revisión de su política respecto de los estándares y ha mejorado esto en su Internet Explorer 7, y aún más en Internet Explorer 8, aún sigue habiendo diferencias, y aún peor, muchos usuarios (cerca de un 20%) siguen empleando la versión 6 del navegador de Microsoft, por lo que podemos decir que el problema persiste y que durante al menos un par de años más va a seguir vigente.

Cuales son las diferencias entre IE y el resto de los navegadores

Las diferencias son muchas. La principal es la forma en que los navegadores Internet Explorer desde la versión 7 hacia atrás incorporan los valores padding. Mientras que los estándares dicen que al ancho (width) debe sumársele el valor del padding, para Internet Explorer (salvo la versión 8) este valor está incorporado. Para comprenderlo mejor, veamos un ejemplo práctico.

Si en una página creamos una capa (div) cuyas dimensiones son de 200 pixeles de ancho por 100 pixeles de alto y le damos un padding de 10 pixeles por lado, para la W3C y la gran mayoría de los navegadores esta caja medirá 220 por 120 pixeles y el contenido ocupará las dimensiones originales. Sin embargo, para Internet Explorer 6 será de 200 pixeles por 120, mientras que el contenido de la capa ocupará 180 por 80 pixeles.

Esto mismo sucede con los bordes. El estándar de la W3C indica que las dimensiones del borde no deben ser incluidas a las dimensiones del elemento. Sin embargo, al igual que lo que describimos en el tema del padding, IE6 incorpora el borde dentro de las dimensiones totales del elemento, reduciendo el espacio para el contenido.

Otra diferencia es que mientras que para todos los navegadores la pseudo-clase :hover puede emplearse sobre cualquier cosa, en IE6 solo es aplicable a los enlaces. Esta pseudo-clase la emplean muchos diseñadores para lograr bonitos efectos cuando se posa el ratón sobre un elemento, lo que no será visible en IE6.

Algunas otras diferencias son:

  • IE6 permite que los bordes tengan un ancho definido únicamente por un número, lo que no está soportado en los navegadores que se rigen por el estándar.
  • IE6 no muestra el padding en imágenes.
  • El posicionamiento fijo (position: fixed;) no funciona en IE6.
  • Presenta enormes problemas con el posicionamiento absoluto, debido a los problemas ya mencionados de bordes y relleno.
  • IE6 no visualiza las transparencias de las imágenes de formato png, lo que limitó su uso durante mucho tiempo.
  • Una gran cantidad de otros problemas menores, pero que por ser precisamente menores, muchos diseñadores no conocían y les originaba serios problemas.

Soluciones inconvenientes

Para solucionar los problemas de compatibilidad de los diseños, se emplearon (y aún hoy hay muchos diseñadores que los emplean) los denominados “hacks”, que consiste en escribir algunas líneas de código que solo podía interpretar IE6 o lo contrario, escribir algunas líneas que IE6 ignorara.

Sin embargo, esto tiene el inconveniente de hacer que el código no sea válido de acuerdo a los estándares, y hoy en día se reconoce que es importante que el código de las web sea válido.

Además de los inconvenientes técnicos que genera el hack, también es considerado una mala práctica, ya que viola los estándares, y los estándares son los que hacen posible que todos los diseñadores nos encontremos escribiendo códigos de la misma forma y los navegadores interpreten lo que queremos. Además, en cierta forma, es avalar el atropello a los estándares por parte de las grandes corporaciones.

Las soluciones “aceptables”

Sin embargo, es evidente que quienes diseñan páginas web deben contar con soluciones que les permitan diseñar para todos los navegadores. Una de las formas de hacerlo, es aprovechar las propias fallas de IE6 y utilizarlas para “engañarlo”.

Por ejemplo, la declaración ¡important la reconocen todos los navegadores, excepto IE6 y las versiones del navegador de Microsoft anteriores a él. Esta declaración se emplea con la finalidad de dar prioridad a un valor por sobre otros que puedan estar influyendo y se coloca después del valor y antes del cierre con punto y coma.

Como IE6 ignora toda la línea del código que contiene esta declaración, esto es aprovechado por los diseñadores para marcar dos valores, uno para IE6 y otro para los demás navegadores.

Veamos un ejemplo. Como siempre, dos archivos: uno XHTML 1.1 y el otro el archivo CSS. El siguiente código dará un ancho a la capa de 220 pixeles en IE6, mientras que para los demás navegadores será de 200 pixeles. En primer lugar, veremos el archivo XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página de ejemplo para lawebera.es</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="caja1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas...
</div>
</body>
</html>

Luego, escribiremos el siguiente código CSS en un archivo que llamaremos “estilo.css” y que guardaremos en el mismo directorio que el documento XHTML.

body {
/* Establecemos los datos básicos de la página, como fondo y fuente    */
font: 13px Arial, Helvetica, sans-serif;
background: #ffffff;
color: #ffffff;
}
#caja1    {
/* En primer lugar, daremos algçun formato a la capa para que sea visible    */
background-color:#33969a;
/* Ahora le daremos las dimensiones */
width: 200px;
height: 100px;
/* A continuación estableceremos un borde y un margen */
border: solid 10px #f86922;
padding: 10px;
}

Y el resultado es el siguiente:
Photobucket

Ahora veremos que sucede si en el código CSS introducimos la siguiente variación:

body {
font: 13px Arial, Helvetica, sans-serif;
background: #ffffff;
color: #ffffff;
}
#caja1    {
background-color:#33969a;
/* Aquí introduciremos las líneas para la corrección: */
width: 200px !important; /* Esta línea no será leida por Internet Explorer */
width: 220px;
height: 100px !important; /* Esta línea no será leida por Internet Explorer */
height: 120px;
/* Fin de la corrección */
border: solid 10px #f86922;
padding: 10px;
}

Por tratarse de sentencias válidas para la W3C, no puede considerarse un hack, por lo que puede considerarse como una buena práctica. De hecho, este modo de burlar las diferencias con Internet Explorer es una de las más utilizadas.

Otra solución aceptable (inclusive es recomendada por la W3C) es la utilización de más de una hoja de estilos, una o más para la o las versiones de IE que requieran de “tratamiento especial”, además de la hoja de estilo normal, que se basará en las recomendaciones del Consorcio WWW y que servirá para todos los demás navegadores. En las hojas de estilos dedicadas a las diferentes versiones de IE, solo será necesario colocar las modificaciones a realizarse al código CSS original.

Cuando se trata de hojas de estilo guardadas en archivo aparte, el condicional se colocará en el link que lo llamará. El siguiente es un ejemplo de ello:

<link rel="stylesheet" type="text/css" href="archivos/estilo.css" />
<!--[if ie 7]><link rel="stylesheet" href="archivos/estilo_ie7.css" /><![endif]-->
<!--[if ie 6]><link rel="stylesheet" type="text/css" href="archivos/estilo_ie6.css" /><![endif]-->

El primer link es el que llama al archive CSS (estilo.css) ubicado en el directorio “archivos”. En esta hoja de estilo se encontrará la totalidad del CSS necesario para la página. En las líneas siguientes, veremos dos links encerrados entre las etiquetas de apertura y cierre de comentario. Dentro de la etiqueta de apertura, se encuentra un condicional, el cual permite que esta línea sea leída e interpretada solo por el navegador que determina.

En estas hojas de estilo, se encuentran solo las correcciones que son necesarias para que la página se vea igual en IE6 y 7 que en otros navegadores. Dado que aparentemente IE6 será el navegador utilizado por una porción más o menos importante de los usuarios de internet, esto seguirá siendo aplicado durante un tiempo más.

Publicado el 16/04/2010, última actualización 16/04/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras