Best Practices Web Design

Looking for the lessons? Get started!

The surprisingly complex method of adding a (proper) horizontal line.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Nothing tough about this. This bit of code:

<hr>

gives us

---

Nothing to it, right? Well, not entirely. You can just ram a <hr> entity into your HTML and let your browser — or your site users’ browsers — style it any which way they want to. Or you can put some nifty styling on it yourself and make it appear (more or less) the same in every browser. You do that by styling it in CSS.

Fun with the HR tag

Back in 2002, Marek Prokop gave us a nifty little tutorial on styling the <hr> tag. In 2009, Jason Miller gave us another one. I’m going to shamelessly lift material from both tutorials for this section. (And there are plenty more tutorials out there. Google is your friend. One I particularly like is offered as a “snippet” by Chris Coyier.) You might want to open Prokop’s and Miller’s pages and follow along; they give some visual aids and added information I haven’t included.

Miller wants to make a simple divider that appears “cut into” the page and renders the same over all browsers. Let’s focus on his tutorial.

Some people recommend that you not use the <hr> tag, instead opting for dividers using CSS-based horizontal borders and such. That’s fine if you want to do that, but there’s no reason why you can’t use the <hr> tag as it was devised – as a section divider.

Besides, different browsers render the <hr> tag (let’s call it our “divider” for the rest of this section) somewhat differently:

• Internet Explorer uses the color property to define the background color, overriding the background-color property.
• The border property does not behave correctly in Opera.
• The height property is broken in Safari.
• Other problems crop up in older browser versions.

We want the border property to work in Safari. So let’s start with some CSS code for our divider:

hr {
   height: 0;
   max-height: 0;
}

This also fixes another height problem in Opera.

Now let’s make Internet Explorer behave by adding these three lines:

hr {
   height: 0;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
}

This technique doesn’t use either the color or the background-color properties, so that dodges Internet Explorer’s buggy behavior there. (If you decide to colorize your divider, refer to Prokop’s site for specific details on how to accomplish this.) The font-size and line-heightproperty makes Internet Explorer 6 behave.

Now, cribbing from Miller’s code, we’re going to add a ton of new properties. I’ll explain them, briefly, after we’re done. Notice that I didn’t just stick the new properties at the end of the previous code block. It’s best practice to put some CSS properties first.

hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 8px auto;
   height: 0;
   width: 100%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #ffffff;
}

Wow, that’s a lot of properties! Some of them you haven’t heard of yet, even. Let’s sum them up very quickly, and wait for the more extensive explanations later:

The display: block property makes the divider a block element. The position: relative property positions the divider relative to the content surrounding it. The padding of 0 essentially means that the divider has no padding, or internal spacing. The margin of 8px auto puts an 8-pixel margin on the left and right sides, and helps ensure that the divider is centered. The width of 100% stretches the divider across the entire page (or column) — I like to shorten this for a nicer visual effect. The border-top and border-bottom properties ensure that all browsers display the divider with that "cut-in" look. Have a look at Miller’s final product (scroll down: it’s in a gray box that won’t display when you use this code) and see what you think. Try it yourself, and change the border-top and border-bottom colors to see the changes (and to match your site’s color scheme).

I haven’t forgotten Prokop’s page (and I salted some of Prokop’s info above). He gives a specific method for making a bright red divider, that you can alter, and shows you how to use a divider image in place of the standard HTML divider. I’ll leave that to you to investigate for yourself.