Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Styling horizontal rules with CSS

Nathan Pitman | 14 April 2006

Don't waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your


in a div, set the
to display: none; and style the surrounding div instead.

div.horRule { height: 1px; border-top: 1px solid #E5E5E5; margin-top: 3px; margin-bottom: 3px; margin-left: 10px; margin-right: 10px; } div.horRule hr { display: none; }

If a user is browsing your site with a device that doesn't support CSS then they'll still see the standard


.

About the Author

Nathan originally trained as a 3 dimensional designer at the Berkshire College of Art & Design in Maidenhead where he bucked the trend by presenting design concepts on screen rather than paper.

Nathan’s passion and knowledge of interactive design is grounded in over 8 years of commercial agency experience working on high profile projects for blue chip clients.

Today Nathan heads up his own digital media design and development agency called ‘Nine Four’ and is (hopefully) known for his commitment to simple, clean design.

Keep It Simple Stupid.

Articles by Nathan Pitman

15 Comments

| Post a comment | Comments Feed

  1. DavidDavid�s site : http://climaxdesigns.com

    14 April 2006, 16:31 : Permanent link to comment

    Why would you wrap your hr in a div. that is counter productive and adds useless code IMHO. why not instead take the time to get it right across browsers or simple apply the css to the bottom of the container element.

    also you can simplify your css margin to margin:3px 10px;

  2. Christopher PastoreChristopher Pastore�s site : http://

    14 April 2006, 16:53 : Permanent link to comment

    Yes, using less divs and avoiding divitus is something needed. If you need a divider between elements use a bottom border instead. Use divs to divide your sections of a page, style your actual tags when ever possible and do NOT wrap them in divs for the sake of styling them when you can just style the tag instead.

  3. Nathan SmithNathan Smith�s site : http://sonspring.com/

    14 April 2006, 18:03 : Permanent link to comment

    Actually, I have found this solution to work quite well in cross-browser situations, and it didn’t take “hours.”

    hr
    {
    background: #ccc;
    color: #ccc;
    height: 1px;
    margin: 0 0 10px;
    }

  4. Mike RumbleMike Rumble�s site : http://www.mikerumble.co.uk

    15 April 2006, 01:12 : Permanent link to comment

    The problem with applying style directly to the hr elements comes when you want to use a background image rather than just a flat background colour, say to provide a fancy graphical seperator bewteeen paragraphs.

    In this case you’d do something like this…

    hr {
    background: url(/image.png) no-repeat 0 0;
    height: 10px;
    margin: 0 0 1em;
    }

    So far so good, unfortunately good ol’ Internet Explorer sees fit to run a 1px grey border around the hr whenever you use a background image, wrapping the hr in a div and applying the styling to the div gets around this problem.

    Of course if you just want simple styling you should apply the styling to the hr element itself – less markup is always good!

  5. Nathan PitmanNathan Pitman�s site : http://www.nathanpitman.com

    15 April 2006, 03:04 : Permanent link to comment

    David: As Mike points out Internet Explorer has it’s quirks.

    Thanks for alerting me to my sloppy long hand margin definition though. Duly noted and corrected. :)

    Something else to consider is that while this method might add an extraneous div, for those who don’t have access to a great range of browser distributions for testing, this is sure to give them consistent results.

  6. Nathan PitmanNathan Pitman�s site : http://www.nathanpitman.com

    15 April 2006, 03:21 : Permanent link to comment

    A useful reference that shows how support for CSS applied directly to an hr element varies between browsers:

    http://www.sitepoint.com/examples/hr/

    I hadn’t seen this before, so it’s interesting to see that I’m no the only crazy fool suggesting that it might be handy to wrap your hr’s in a div. ;)

  7. DavidDavid�s site : http://climaxdesigns.com

    15 April 2006, 09:56 : Permanent link to comment

    ; )

  8. Joshua KendallJoshua Kendall�s site : http://www.joshuakendall.com

    15 April 2006, 19:14 : Permanent link to comment

    border:0; should take care of the IE border issue.

    I was originally going to use HR’s for dividing areas of my site, but I opted for using just a 1px border on the bottom of the div/paragraph.

  9. Nathan SmithNathan Smith�s site : http://sonspring.com/

    15 April 2006, 23:05 : Permanent link to comment

    I just wanted to chime in here again and say I didn’t mean to ruffle any feathers with my alternate method. I realize that if you’re going for a graphical effect, my example is somewhat lacking. That’s actually a pretty slick method over at Sitepoint. Anyway, peace!

  10. Fredrik StaiFredrik Stai�s site : http://www.anvito.com/valencia/

    17 April 2006, 07:25 : Permanent link to comment

    The reason why I chose to wrap my hr’s inside a div was to make sure the site still has the seperators when viewed by non-css browsers. When you just use stylesheets to seperate the sections, or whatever, the site will loose all of that for someone who can’t or doesn’t want to view the css.

  11. Mike BadgleyMike Badgley�s site : http://www.apluswebcreations.com

    17 April 2006, 07:57 : Permanent link to comment

    I found that using the styling below creates seemingly-perfect hr’s across IE 5.0+, Mozilla Firefox 1.05+, Netscape 6.0+
    @
    hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 0;
    }
    @

  12. CraigCraig�s site : http://solardreamstudios.com

    17 April 2006, 08:17 : Permanent link to comment

    Mike, actually the margin: 0 thing doesn’t work perfectly in IE. There will always be a margin no matter what you set it to. Also, there will always be at least 1px of viewable HR in IE.

  13. Jan Bra�naJan Bra�na�s site : http://www.janbrasna.com

    17 April 2006, 08:31 : Permanent link to comment

    You can also have a look at Marek Prokop’s examples: http://www.sovavsiti.cz/css/hr.html

  14. Nathan PitmanNathan Pitman�s site : http://www.nathanpitman.com

    17 April 2006, 14:30 : Permanent link to comment

    Nathan: Don’t worry. Consider my feathers well and truly un-ruffled. Discussion and debate is always a good thing IMHO.

  15. Roy TomeijRoy Tomeij�s site : http://

    18 April 2006, 05:03 : Permanent link to comment

    Joshua: It seems you went for styling the border instead of using an hr for its cross-browser compatibility. Wouldn’t it be better to base these decisions on the semantics instead of the presentation?
    You do have divided your content visually, but your structure remains undivided.


Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors