Líneas horizontales

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

Por desgracia, cada navegador trata las líneas de una manera distinta. Firefox 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: color y background-color

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

• En Firefox, 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 asegurar que la línea se vea del mismo color en ambos navegadores, se pueden 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: width y height

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: text-align, margin-left y margin-right

Por omisión, las líneas se alinean al centro.

hr { width: 50%; }

Pero para establecer una posición determinada, Firefox e Internet Explorer funcionan de forma distinta:

• En Firefox, 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).

En algunos casos, se puede conseguir que ambos navegadores muestren la misma línea en la misma posición estableciendo 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;}

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;}

Pero en otros casos no se puede conseguir, ya que ambos navegadores no aplican las propiedades que definen la línea en el mismo orden.

	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 Firefox establece primero el ancho de la línea y después coloca la línea en la posición que definen los márgenes (interpretando 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, parece que Internet Explorer 6 primero reserva los márgenes y en el resto del espacio dibuja la línea (interpetando los porcentajes con respecto al espacio restante, es decir, descontando los márgenes).

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

Volver al índice

Borde: border

Las líneas sin color se ven porque el navegador dibuja un borde que da profundidad a la línea:

hr { height: 10px; }

Cuando se da color a las líneas, Internet Explorer ya no dibuja ese borde, mientras que Firefox lo sigue dibujando:

hr { height: 10px; color: red; background-color: red; }

Si se quiere quitar ese borde en Firefox, hay que quitarlo explícitamente con la propiedad border, pero Internet Explorer no hace caso de esa propiedad:

hr { height: 10px; color: red; background-color: red;   border: none; }

Así que tener cuidado, porque si se le quita el borde a una línea que no tiene color, en Firefox la línea dejaría de verse:

hr { height: 10px; border: none; }

Volver al índice