Horizontal rule

HTML & CSS
1

Clients design calls for a couple of horizontal rules. I wanted to use the <hr> tag at 1px all the way across the container, but it keeps coming out like it is 2 px. Any ideas why this is happening?

I could do a div container with a black background and stack it over the other containers and run a rule at the top. Is this could coding form? <div id=“rule”></div> and style the width, height, background and rule?

Thanks. New to css.

CS

2

<hr> are styled with a border of height 1px. Since it’s a border on all sides, you wind up with top and bottom hitting each other, thus a 2px horizontal rule.

What you want to do is explicitly set the width of the border to just have a top height:


border: solid red;
border-width: 1px 0 0;

That’ll let you do a one pixel horizontal rule.

3

<hr> tags cannot be fully styled in all browsers. To be able to style it exactly how you want you need to wrap it in a div and then in the CSs hide the hr completely and style the bottom browser of the div. That way the hr only shows for those with CSs disabled who would not see the rule otherwise.

4

Which browsers can’t it be fully styled in? Are we just talking <=IE6, or are there more modern browsers you can’t? I’ve never noticed them not being styled.

5

See Style the HR Tag - Horizontal Lines and CSS - Styling Horizontal Lines for details of what does and doesn’t work where. The references to IE might be to IE6 since I think Jennifer wrote that article some time ago. All the variants that didn’t work are described in detail so you would be able to test them in IE7 to see if they work there or still do what earlier versions did.

6

As Stephen said the problem is with IE6 and 7 and although you can style the border you cannot collapse the margin no matter what you try.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
hr {
    border: solid red;
    border-width: 1px 0 0;
    height:0;
    overflow:hidden;
    font-size:0;
    line-height:0;
}
p {
    padding:10px 0;
    background:blue;
}
</style>
</head>
<body>
<p>test</p>
<hr />
<p>test</p>
</body>
</html>

In IE6 and 7 the horizontal rule takes up about 15px height which cannot be collapsed. hence the reason that some people uses a div around the hr and then hide the hr and style the div.

IE8 is fine though.

7

Ah, great info. Thanks.

I usually wind up doing a negative margin for “IE fix” style sheets on those and figured I was just a bit touched in the head. Guess there is a legitimate reason why. =D