Chapter 54. Rehabilitating Horizontal Rules

One of the most useful but least used elements in all HTML is the humble horizontal rule. Its goal is a simple but noble one: to create a visual dividing line between the sections of a page.

The best thing about this element is that it's a free graphic. The browser generates it internally. Your visitors don't have to download it, which reduces the overall graphics load and improves the performance of your site.

Part of the problem with the horizontal rule is that, out of the box, it's too long, too blocky, and too obtrusive, as Figure 54.1 shows. Most designers would rather separate the sections of their page with elegant whitespace, not this ugly thing. But if you take the time to adjust its attributes, you can create some truly classy effects, as in Figure 54.2.

Figure 54.1. Unmodified, HTML's horizontal rule is an aesthetic train wreck.

Figure 54.2. With a little attribute modification, the horizontal rule shows promise.

Table 54.1 presents the HTML attributes for the hr tag, which generates horizontal rules. You'll modify most of these attributes to make horizontal rules more respectable.

Table 54.1. HTML Attributes for Horizontal Rules

ATTRIBUTE	CONTROLS	POSSIBLE VALUES	EXAMPLES
align	The horizontal position of the element	left, right, center	<hr align="left"> <hr align="center">
noshade	That the horizontal rule doesn't appear with a 3D shading effect	No value	<hr noshade>
size	The height of the element in pixels	Any numeric	<hr size="10">
width	The horizontal size of the element in pixels	Any numeric, including percentages	<hr width="50"> <hr width="33%">

The first order of business is getting rid of the default shading effect, which accounts for most of the clumsiness of the horizontal rule:

 <hr noshade> 

The noshade attribute doesn't take a value. It either appears in the hr tag, or it doesn't.

Next, to make the horizontal rule subtler, reduce its height. By default, the rule is 2 pixels tall in Internet Explorer and 3 pixels tall in Netscape. Setting the size attribute to 1 not only standardizes the appearance of the element across browsers, it improves its effectiveness. Slimmer is better; you don't want the horizontal rule calling too much attention to itself. So:

 <hr noshade size="1"> 

The standard horizontal rule is also too long. By default, it fills the entire width of the page or whatever container element it happens to be in, such as a table cell or a CSS div. Truncated horizontal rules work better. They introduce extra whitespace into your design, which helps your layout to breathe.

Some designers prefer to give precise pixel measurements for the width of the horizontal rule, like this:

 <hr noshade size="1" width="200"> 

TIP

You may alter the color of horizontal rules with CSS, but browsers don't agree on which CSS attribute is the right one for the job. Internet Explorer prefers the color attribute, while Netscape insists on background-color. Setting the color attribute in Netscape does nothing in IE. Similarly, setting the background color in IE does nothing in Netscape.

One possible workaround is to specify both attributes in your style definition:

 hr {   color: #FF0000;  /* For IE */   background-color: #FF0000;  /* For Netscape */ } 

The precise amount depends on the width of the area that the horizontal rule occupies. If you're working with a fixed-width design, then this option is probably your best bet. However, if you have a liquid design that changes size depending on the size of the browser window, a fixed-width horizontal rule might give you trouble. It may look just right in a maximized browser window, but it might be too big in a smaller browser window.

To solve this problem, just make the horizontal rule liquid, too, by specifying its width as a percentage:

 <hr noshade size="1" width="20%"> 

TIP

Another classy effect is to set the height of a horizontal rule to some modest amount, like 4 or 5 pixels, and remove the noshade attribute. Doing this creates a hollow, rectangular box.

A value of 20% scales the width of the horizontal rule to 20% of the width of the area it occupies. So if the horizontal rule is in a table cell that happens to be 600 pixels wide, the width of the horizontal rule becomes 120 pixels, or 20% of 600.

The browser centers horizontal rules by defaultnot that you can tell, because the element expands to its full width automatically. Centering becomes more apparent when you shorten the width. Leave the rule centered if you like, but many designs work better when you position the rule to the left or right:

 <hr noshade size="1" width="20%" align="left"> 

GEEKSPEAK

An end sign is a bullet or typographical character that appears at the end of a story or article. It is also a prophecy that Armageddon is nigh.

The horizontal rules in Figure 54.2 use these precise attributes.