Líneas horizontales

En esta lección aprenderás las propiedades que se pueden aplicar a una línea horizontal <hr /> de una página web:

• Color
• Tamaño
• Alineación

Por desgracia, cada navegador trata las líneas de una manera distinta. Mozilla considera las líneas como bloques, mientras que Internet Explorer considera las considera como elementos en-línea. Por eso, las propiedades que permiten establecer las características de una línea son distintas en cada navegador. Normalmente la solución es incluirlas todas, pero eso tampoco funciona siempre.

Color de una línea

El color de una línea se establece de distinta manera en Mozilla y en Internet Explorer:

• En Mozilla, la propiedad background-color establece el color de la línea.
• En Internet Explorer, la propiedad color establece el color de la línea.

Para asegurarte de que la línea se vea del mismo color en ambos navegadores, puedes establecer las dos propiedades (color y background-color) con el mismo valor.

	hr { background-color: red; }
	hr { color: red; }
	hr { background-color: red; color: red; }

Volver al índice

Tamaño de una línea

La propiedad height establece la altura de la línea.

hr { height: 10px; }

La propiedad width establece la anchura de la línea. Conviene expresarla como porcentaje.

hr { width: 50%; }

Volver al índice

Alineación de una línea

Por omisión, en Mozilla las líneas se alinean al centro. Pero en Internet Explorer es necesario establecer la propiedad text-align con el valor center.

	hr { width: 50%; }
	hr { width: 50%; text-align: center; }

La alineación de una línea se establece de distinta manera en Mozilla y en Internet Explorer::

• En Mozilla, las propiedades margin-left y margin-right establecen la posición de la línea. Los valores de estas propiedades se pueden expresar como distancias o como porcentajes.
• En Internet Explorer, la propiedad text-align establece la posición de la línea. Los posibles valores de text-align son left (izquierda), right (derecha) y center (centro).

Para asegurarte de que la línea se alinee de la misma manera en ambos navegadores, puedes establecer las dos propiedades simultáneamente.

El ejemplo siguiente muestra cómo se alinea una línea a la izquierda:

	hr { width: 50%; margin-left: 0px;}
	hr { width: 50%; text-align: left;}
	hr { width: 50%; margin-left: 0px; text-align: left;}

En este caso, el Internet Explorer parece hacer caso de la propiedad margin-left, pero no es así, simplemente la línea está a la izquierda porque Internet Explorer la pone a la izquierda si no está la propiedad text-align.

El ejemplo siguiente muestra cómo se alinea una línea a la derecha:

	hr { width: 50%; margin-right: 0px;}
	hr { width: 50%; text-align: right;}
	hr { width: 50%; margin-right: 0px; text-align: right;}

Las propiedades margin-left y margin-right permiten establecer la posición de la línea en cualquier posición, expresada como porcentaje o distancia.

	hr { width: 25%; margin-left: 50%;}
	hr { width: 33%; margin-left: 33%;}
	hr { margin-left: 33%; margin-right: 33%;}
	hr { margin-left: 20px; margin-right: 20px;}

Parece que Mozilla primero aplica el ancho de la línea y después coloca la línea en la posición que definen los márgenes (interpetando los porcentajes con respecto al espacio total disponible), así que si se dan sólo los dos márgenes considera que la línea tiene de ancho el 100% del espacio. Sin embargo Internet Explorer 6 parece que primero reserva los márgenes y en el resto dibuja la línea (interpetando los porcentajes con respecto al espacio restante). Además hay que tener en cuenta que Internet Explorer alinea a la izquierda, mientras que Mozilla centra la línea.

No sé si se puede definir un estilo que entiendan los dos navegadores.

Volver al índice