CSS for lunch

Styling the horizontal rule

It’s never good practice to use HTML elements as presentation elements, but sometimes you gotta use an <hr />.

color: #000;
background-color: #000;
height: 4px;
border: none;

Note that you have to specify the color and background color so it works in IE.

This entry was written by Andrew Mager, posted on July 27, 2008 at 11:16 am, filed under HTML Elements, Presentation and tagged hr, not standard. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Todd

Posted July 29, 2008 at 1:15 pm | Permalink

I don’t use hr’s at all. Haven’t for years. I just use a border and bump up the margin or padding, or in rare cases, an empty div with a border.
Kevin Cupp

Posted July 30, 2008 at 11:45 am | Permalink

Ah thanks, I was wondering why my HRs weren’t working right in IE on PB.
Mike Smith - Bootstr

Posted August 14, 2008 at 11:12 am | Permalink

I’m with Todd, I haven’t used hr tags in a long time, but this is good to know in case I do ever need it.

Any chance of some new tips being posted soon?
United Voices

Posted August 17, 2008 at 11:31 am | Permalink

well what about mozilla. how will it look i mozilla?
Scarf*oo

Posted August 25, 2008 at 3:45 am | Permalink

The problem here is if you want a 1px high hr. It will not work in all browsers, no matter what you do.

And you should probably use hr-s where you want to separate sections with it. hr-s are not meant for presentation only, they also show up as separators for blind people or people with other visual accessibility problems.

By Style the horizontal rule | CLD Tutorials on July 28, 2008 at 3:58 am

[…] : cssforlunch.com Difficulty : […]
By Style the horizontal rule | CLD Tutorials on July 28, 2008 at 4:15 am

[…] Source : cssforlunch.com […]
By irhfyjhx on October 14, 2008 at 12:19 am

irhfyjhx…

irhfyjhx…