Como estilizo reglas horizontales sin imágenes?

Eliminar subrayado de links

Muchos olvidaron que en Xhtml hay un elemento que se llama HR exclusivo para la creación de reglas horizontales. A través de CSS podemos darle el aspecto deseado y dejar de usar imágenes para simular divisiones.


Atacamos directamente a la etiqueta HR desde la hoja de estilo asignando los atributos necesarios. Podemos definir el grosor y largo de la regla con width y height, usar bordes, colores y mas. Hay que tener en cuenta que los navegadores Opera y Firefox renderizan diferente a IE7, esto se puede comprobar al usar el atributo color, ya que Firefox y Opera lo toman como color de borde e IE7 como color de relleno.


Otra cosa a tener en cuenta es si vamos a usar bordes definir su tamaño porque este varia según el modelo de caja de cada navegador.


Código Xhtml


Código CSS

hr{
width:100px;
height:2px;
border:1px solid #FFCC00;
color:#FFCC00;
background-color:#FFCC00;
}


Las propiedades “Color” y “Background-color” tienen que tener el mismo valor para mantener una correcta visualizacion del color en todos los navegadores.


Resultado:



Deja un comentario