Handling the HR Tag

I popped this idea into the latest Design View, but I figure it’s probably worth mentioning it here too.

If you’ve ever fiddled with styling the venerable HR you probably still have the fingernail marks on your eyeballs. For what looks like such a simple little tag, it certainly has some of the loopiest cross-browser CSS implementation. Some browsers consider it a foreground (namely IE), others think it’s a background (FireFox/Moz) while other aren’t really committed either way.

Annoying enough for sure, but the final blow is delivered via IE’s take on the HRs ‘background-image’, in which it insists on adding a milky grey line to any background image. The image below shows a blue dashed ‘true’ border (marked with the ‘X’) and the grey ‘pseudo-border’ wrapping the background.

To my knowledge no-one has ever come up with a way of removing this line, rendering the HR ‘background-image’ essentially useless.

So rather than trying force CSS to do what it can’t, I’m using JavaScript to do the dirty work.

The method I’ve used is demonstrated and explained on this example page, which also shows a selection of some of the creative interpretations employed by various browsers.

The other weird little thing I discovered in my excursions was a FireFox bug which causes it to render rounded corners on it’s HRs if you add the ‘noshade=’noshade” attribute (I know, you shouldn’t anyway). I’ve whipped up a quick demo page for this interesting new feature here.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.lowter.com charmedlover

    I’ve been looking for these


    fixes. I guess I should subscribe to the Design View :p

  • http://www.splintered.co.uk redux

    however, and maybe even more fundamentally: what’s the lowly HR still needed for?

  • http://www.sitepoint.com AlexW

    redux, I think it’s a personal preference thing to an extent. I’ve heard people argue HRs are a purely presentation element, and as such shouldn’t be used at all. I don’t subscribe to that idea. To my thinking, they contribute directly to the meaning of the document in a way that has nothing to do with the way their presentation style.

    For all their problems, the thing I like about HRs is they work to some extent on every device (except screen-readers).

    Links and Lynx renders them nicely, even though they don’t acknowledge any visual distinction between headings and paragraphs.

    Nokia’s phone browser and Opera mobile edition likes them too.

    Creating a visual analog to the HR with a DIV means the document loses some meaning without the CSS. IMHO any extra widget we can rely on to imply structure in simpler environments is gold.

  • Marty

    I hope you’ll take on Fieldset/Legend next :)

  • Ross Riley

    i’ve always found the best way to style hr is as follows.
    make a custom class with the styling you want.
    eg:
    .hr {
    border:1px dotted black;
    }
    and then hide normal hr tags….
    hr {
    display:none
    }

    Then when you insert an hr tag do the following:


    Now you have a custom hr style but completely accessible to non css browsers.

  • http://www.sitepoint.com AlexW

    That’s pretty much what I’m doing Ross, only I’m letting the client put the DIV in. We just send a normal HR in the page.