La última vez que me fui de merienda al campo, limpié meticulosamente toda la zona de hormigas, pero dio lo mismo, esos pequeños bichos aparecieron por todos los lados. Lo mismo puede suceder con el código HTML escrito correctamente, incluso aunque el código esté perfecto, un navegador puede destrozar un diseño creado con todo el cuidado del mundo.

Existen múltiples formas en las que un error puede arruinar sus páginas web. El tipo de letra pequeño que se lee bien en un PC puede ser diminuto en un Macintosh. Las filas de espacios que añadió para separar las secciones de una página pueden desaparecer en Netscape Navigator o los títulos y subtítulos de la página cuyo tamaño ha elegido con tanto cuidado (con <font size=4>, <font size=3> o <font size=2>) pueden aparecer diferentes en distintas máquinas.

Es fácil asumir que la causa de estos fallos reside en sus conocimientos del lenguaje HTML, después de todo, ¿quién no ha cometido un error con su código al menos una vez? Pero a veces se trata de un error del navegador. Estos programas leen y procesan el código HTML de formas diferentes, pudiendo afectar a la forma en que su página aparece en pantalla. Además, los usuarios pueden haber modificado las configuraciones de tipos de letra de sus navegadores arruinando su diseño (algunas personas prefieren leer todo en Courier de 16 puntos).

Los diseñadores de páginas web se enfrentan al reto de crear páginas que pueda leer cualquier persona, utilizando cualquier navegador en cualquier plataforma. ¿Cómo es posible hacer esto sin volverse loco? Es fácil, basta con saber cuáles son los principales errores de presentación y la forma de evitarlos. Este artículo identifica algunos de los errores más comunes y explica cómo hacer el código HTML para evitarlos. (En el texto se incluyen las líneas de código HTML para ilustrar las explicaciones, pero si quiere ver el código completo, conéctese a www.macworld.com/2000/04/create/browserbugs.html.

Problema: Tipos de letra inconsistentes

Los usuarios enredan con los ajustes de tipo de letra de sus navegadores por diversas razones: miles de desarrolladores web están enamorados de los tipos de letra pequeños y Microsoft Internet Explorer añadió los botones de tipo más pequeño y más grande en la barra de herramientas del navegador. El resultado es que un gran número de visitantes de las páginas web están deshaciendo las especificaciones precisas de tipos de letra de los diseñadores pulsando estos botones hasta que pueden leer el texto. Esto puede hacer que un diseño pierda sus proporciones, con espacios en blanco incorrectos y subtítulos mal distribuidos.

Solución: Usar marcas HTML flexibles

La única forma en la que se puede garantizar de forma absoluta cómo se verá la página en el navegador de sus visitantes es convirtiendo cada página en una gran imagen GIF; algo nada práctico. Una solución más realista es prevenir estos errores simplificando el código HTML. Si quiere texto más pequeño utilice la marca <small>, lo que hará que el navegador escale el texto de forma relativa al tipo de letra por omisión del usuario. Por ejemplo, si el tipo de letra por omisión son doce puntos, el tipo small será diez puntos.

Si quiere incorporar diversos tamaños en la misma página, emplee las marcas <big> y <small> como cabeceras HTML. Estos tamaños variables escalan de forma proporcional al ajuste por omisión del navegador, garantizando la conservación de las proporciones del diseño con independencia de los ajustes personales de tamaño de letra del usuario.Las marcas como <font size=“+2”> y <font size=“-1”> no se escalan de una forma tan elegante.

Problema: Diseño separado

En teoría, el primer elemento de una página web (ya sea una tabla, un gráfico o cualquier otra cosa) debería utilizar la esquina superior izquierda de la ventana del navegador como origen. Aunque esto es cierto, no es exacto. Los navegadores añaden espacios que separan los diseños varios píxeles del borde (vea “Diseños desplazados”). Si es importante que su diseño comience en la esquina, sin espacios encima o a la izquierda, este margen añadido por el navegador puede destrozar su trabajo.

La cantidad de espacio extra que un navegador añade al diseño depende de la plataforma del usuario: en el Macintosh, con independencia de que se emplee Netscape Navigator o Internet Explorer, el diseño se mueve 8 píxeles a la derecha y 8 hacia abajo. Pero para los usuarios de PC es aún peor: El desplazamiento que introduce Internet Explorer para PC es de 10 píxeles hacia abajo y 15 hacia la derecha.

Solución: Añadir atributos de margen

El desplazamiento insertado por el navegador es uno de los problemas de diseño más fáciles de resolver, basta con añadir los atributos de margen a la marca <body>. Para ser exactos, cuatro atributos.

marginwidth. Determina la cantidad de píxeles que se introducen como espaciado entre el borde izquierdo de la ventana y los elementos contenidos en el cuerpo de un documento HTML.

marginheight. Determina el desplazamiento relativo a la parte superior de la ventana.

leftmargin. Le indica al navegador el ancho en píxeles del margen izquierdo (similar al atributo marginwidth).

topmargin. Le dice al navegador el ancho en píxeles del margen superior (similar al atributo marginheight).

Incluso aunque parezca que hay una duplicación en las marcas de atributos, son necesarios los cuatro, ya que Internet Explorer 3.0 reconoce las marcas marginwidth y marginheight, mientras que los navegadores 4.0 entienden las marcas leftmargin y topmargin. Desafortunadamente, si sus usuarios acceden a sus páginas con Navigator 3.0, tiene mala suerte, ya que no se puede quitar el margen con ese navegador.

Problema: Celdas que se encogen

Las tablas HTML se diseñaron para permitir que los desarrolladores Web mostraran matrices de datos de forma agradable y se supone que el diseñador no las utiliza para controlar la distribución de elementos en la página. Pero esto no quiere decir que no se pueda protestar por el comportamiento incorrecto de las tablas usadas en exceso.

Una de las quejas más comunes sobre las tablas es que las celdas no mantienen sus tamaños (algo que tiende a afectar más a los usuarios de Navigator que a los de Internet Explorer). Al crear una tabla, hay que indicar la anchura de la tabla y los anchos de su celdas, ya que esto permite que la tabla se dibuje más rápidamente debido a que el navegador sabe a priori la anchura de cada celda. En caso contrario tiene que leer todos los contenidos de las celdas para dimensionarlas proporcionalmente.

Pero aún así Navigator puede tener problemas con las tablas, incluso modificando a veces las celdas. Cuando el contenido de una celda no es tan ancho como la celda en sí, el navegador ajusta la celda a la anchura de su contenido.

Solución 1: Ajuste el contenido de la celda al tamaño correcto

Una forma de asegurarse de que una celda no se encoje es ajustar su contenido para forzar a la celda a mantener su tamaño, tal como se muestra en el siguiente ejemplo:

Ejemplo 1: <td width="20">&nbsp; &nbsp;&nbsp;</td>

Ejemplo 2: <td width=&quo