Habitualmente, cuando diseñamos nuestras páginas con XHTML y CSS tendemos a sustituir las
típicas líneas separadoras horizontales <hr> con algún estilo aplicado a un div (border-bottom por ejemplo). Es una práctica correcta e incluso recomendable pero debemos recordar que, cuando un usuario no visualiza la página con la hoja de estilo, toda referencia a esta división desaparece. En la mayoría de casos esto no tiene mayor importancia ya que las divisiones son estéticas pero cuando tu contenido precisa de esas divisiones para ser comprendido no deberías privar a usuarios de navegadores de texto o lectores de pantalla de esa ayuda.
La etiqueta <hr> sin aplicarle ningún estilo nos da una línea horizontal simple, incluso fea, que puede echarnos atrás a la hora de utilizarla. Como esta:
Recuerda que en HTML la etiqueta no tiene cierre y en xhtml debes cerrarla igual que harías con una imagen o un salto de línea: <hr />
Antes de empezar es importante apuntar una diferencia fundamental en el tratamiento de las líneas horizontales en los diversos navegadores. Mientras que los navegadores basados en Gecko y Opera, entre otros, consideran las etiquetas <hr /> como elementos en bloque, Internet Explorer las trata como elementos en línea. Está claro que esto causa ciertas inconsistencias y nos obliga a utilizar atributos específicos para determinado navegador.
Que daría como resultado:
Una línea de 1px de alto, con un largo del 80% y color azul, que se ve perfectamente en Firefox y Opera (entre otros) pero que no se vé bien en Internet Explorer, ya que este utiliza la propiedad color para establecer el color de la línea (de la misma forma que utilizariamos color para cambiar el color del texto).
Que resultaría en:
Ahora lo que nos dá problemas son los bordes. Para evitar diferencias entre navegadores, lo mejor es especificar un borde de 0px, evitándonos así ciertos fallos de versiones anteriores de Opera e inconsistencias varias.
Y, al fin, obtenemos una línea coloreada que se verá bien en los navegadores más utilizados.
Ya que las líneas horizontales son tratadas como elementos en bloque por unos navegadores y elementos en linea por otro(s), para definir la alineación habremos de utilizar tanto text-align como margin
Que resulta en:
Echale un vistazo al artículo sobre centrado horizontal con css si tienes dudas.
Para concluir, un consejo. Por muy útiles que puedan resultar las líneas horizontales para dividir párrafos en artículos y páginas, el abuso de ellas hará la lectura muy pesada. Como dicen en los anuncios «usar con moderación».
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] Hace bien poco, se nos planteó en el trabajo algo con lo que no me había encontrado aun, dar estilo a las etiquetas <hr />. Buscando por la red algún tipo de solución, encontré un artículo en Webmaster Libre, en el que podemos encontrar información de como dar estilo a las reglas horizontales. En ese mismo artículo, comenté que jugando con el border, se podía conseguir algo un poco más atractivo. Senda respondió, con toda la razón del mundo, que verificara en otros navegadores, y me di cuenta. Al menos que yo haya podido comprobar, en IE no podemos ocultar el borde al <hr />, por lo que cualquier modificación que hagamos en un navegador que respete los estándares, queda descartada. [...]
Feed RSS de los comentarios de este post.
Hoy nos hemos encontrado con esta cuestión en el trabajo.
Si no le ponemos “border: 0″ podemos disponer de más posibilidades, como “border-style: dashed;”, que es particularmente lo que nosotros pretendíamos.
Buen artículo
Comprobad que tal se ve en todos los navegadores, yo he tenido problemas con las propiedades de borde, de ahí el 0.