CSS Tip:
Custom Horizontal Rules

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Horizontal rules defined in basic HTML look pretty boring on most browsers, so designers have long used graphic images as dividers instead. But you can use Cascading Style Sheets to create attractive custom rules. We'll show you how to use style sheets to design custom rules that download fast and complement your color scheme and page layout.

Increase Page Usability And Readability

Suppose you have a long document to post or you have several diverse topics on a single page. Naturally, you want to make easy for visitors to scan the page quickly to find the information they need. There are several ways to do it:

Use all three to increase the usability of your page. Header and anchor tags give you a chance to give your keyword density a boost. Page dividers can be attractive, but be careful if you decide to use a graphic image as a divider. A lot of extra images can really increase your page's load time. Always optimize graphics files with GIFBot before you post them.

Consider whether a custom horizontal rule might suit your needs just as well as an image divider.

Lessen Browser Compatibility Problems

The basic tag for a horizontal rule, <HR> is still valid in HTML, but all its attributes were deprecated (marked for future deletion) in HTML 4.0. Although browsers still support deprecated HR attributes like size, width, align, etc., use Cascading Style Sheets (CSS) instead. They're just as easy to use and will help bring your HTML code into line with W3C specifications.

As an added benefit, Netscape 6.x browsers recognize some CSS attributes that they ignore in HTML. For example, consider this HR definition:

<HR align="center" width="25%" size="10" color="blue">

Explorer displays a blue horizontal rule that's centered on the page, 10 pixels thick, and covers 25% of the browser window. Netscape displays an empty box that's centered, 10 pixels thick, and encompasses 25% of the browser window.

Which might best suit your site's color scheme and layout? With CSS, you can ensure that visitors browsing with Explorer or Netscape 6.x browsers see the colored rule. WebTV and Netscape 4.x visitors will see a basic horizontal rule specification.

If you're concerned that horizontal rules or other CSS and HTML techniques may be breaking your page in some browsers, be sure to test your pages for browser compatibility.

Creating Custom Horizontal Rules

You have a lot of options to choose from when you define horizontal rules with CSS. Here are some of the most common:

Here is a sample definition of a HR using CSS:

<STYLE>
HR {
    height:10px;
    width:30%;
    background:#446791;
    margin: 0px 150px 0px 150px;  
   }
</STYLE>

This specification creates a dark blue horizontal rule that is 10 pixels high, occupies 30% of the browser window, and is centered on the page. If you want to right or left-justify the line, you'll need to experiment with the margin specifications to find what looks best for your page.

It works in Explorer 5.x and 6.x, and Netscape 6.x browsers. Web TV and Netscape 4.x browsers ignore the style specification and display a plain thin line that occupies 100% of the browser window. Study your server logs to determine what percentage of your audience might see the plain line instead of the custom rule. If it's a substantial percentage, you may need to use an image divider instead.

When you replace your standard horizontal rules or graphic images with CSS-defined horizontal rules, you benefit in several ways.

It's an easy way to get comfortable placing CSS elements on your page without ruining your page layout.

Less graphic images mean that your visitors see your page more quickly.

Finally, your page becomes more standards-compliant, so it will display better in the new generation of browsers.