CSS and how to define horizontal rules (HR)

Posted on June 14, 2002 @ 21:41 in General

Just what you wanted to know...

Since W3C says that the NOSHADE, SIZE and WIDTH attributes of the horizontal rule are now deprecated, you probably wonder how to define them in CSS. Right?

I've been through the CSS1 and CSS2 specs a couple of times, but unless I'm mistaken, there is no mention of the HR tag and how to treat it in CSS. Using a Google search of the w3.org domain, I eventually dug up a very helpful mailinglist message. Turns out Mozilla treats a horizontal rule as if it were a box and the background-color attribute defines the color of the horizontal rule inside that box. If you want 1px high solid black horizontal rules, this definition works for me:

hr {height: 1px;
border-style: none;
color: black;
background-color: black;
}

You need the color: black in there for IE, Opera 6.01 draws a 1px solid black line with either the color or background-color, or both.

[update 2003-03-17: some more references about styling the HR tag]

Comments and Trackbacks

  1. So how could you created a centered horizontal rule that's, say, 80% of the page width?

    Posted by Zelda on September 07, 2002 @ 18:54

  2. I recon you just add:

    width: 80%;

    to the CSS def of your HR.

    Posted by Frank on September 08, 2002 @ 14:41

  3. so. i'm doing a new facelift and adding a few hr's. this is what i'm putting in the style sheet: HR { height:2px; width:150px; background:#f36176; margin: 0px 142px 0px 142px; border-style:none; } it totally works in firefox, but in ie,...

    Trackback from misanthropic tendencies on December 29, 2004 @ 06:37

Post a comment

Comments and trackbacks have been closed on this site. My apologies.

Since MT-Blacklist inexplicably stopped working I had no other recourse than close comments and trackbacks to stop the spam. I've been meaning to correct this for quite a while, but life got in the way... in a good way I should add.