The Boston Diaries

The ongoing saga of a programmer who doesn't live in Boston, nor does he even like Boston, but yet named his weblog/journal “The Boston Diaries.”

Go figure.

Friday, July 12, 2002

Them darned fancy <HR>s …

I've been following dive into mark's 30 days to a more accessible weblog and so far, everything he's said to do I've pretty much done with this weblog.

Today's entry is about the <HR> tag and how to change the look of them. The method he uses works, but is a bit of a kludge. Mostly because it supports Netscape 4x, which doesn't support CSS to any decent degree.

That's why I've forgone Netscape 4x support entirely. How I do it is the way it's supposed to be done. First off, in the HTML for this page, I hide the style sheet from Netscape 4x:

  @import "/bdstyle.css";

Netscape 4x doesn't suport “@import” so nothing gets included (thankfully, else my style sheet would crash it, hard). The style sheet then has:
  width:                50px;
  height:               16px;
  border:               none;
  margin-top:           0;
  margin-right:         auto;
  margin-bottom:        0;
  margin-left:          auto;
  padding:              0;
  background-image:     url(hr.gif);
  background-repeat:    no-repeat;
  background-position:  center;

Then in the HTML page, to use the image, I do:

<HR CLASS="next">

And I have my fancy <HR>. And it works fine under the current versions of Netscape (6x), Mozilla (from about 0.9.2 on up), Opera and Internet Explorer (although those last two draw a faint grey border around the image).

Obligatory Picture

[“I am NOT a number, I am … a Q-CODE!”]

Obligatory Contact Info

Obligatory Feeds

Obligatory Links

Obligatory Miscellaneous

You have my permission to link freely to any entry here. Go ahead, I won't bite. I promise.

The dates are the permanent links to that day's entries (or entry, if there is only one entry). The titles are the permanent links to that entry only. The format for the links are simple: Start with the base link for this site:, then add the date you are interested in, say 2000/08/01, so that would make the final URL:

You can also specify the entire month by leaving off the day portion. You can even select an arbitrary portion of time.

You may also note subtle shading of the links and that's intentional: the “closer” the link is (relative to the page) the “brighter” it appears. It's an experiment in using color shading to denote the distance a link is from here. If you don't notice it, don't worry; it's not all that important.

It is assumed that every brand name, slogan, corporate name, symbol, design element, et cetera mentioned in these pages is a protected and/or trademarked entity, the sole property of its owner(s), and acknowledgement of this status is implied.

Copyright © 1999-2024 by Sean Conner. All Rights Reserved.