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. David : 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 Pastore : 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 Smith : 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 Rumble : 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 Pitman : 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 Pitman : 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. David : http://climaxdesigns.com

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

   ; )

8. Joshua Kendall : 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 Smith : 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 Stai : 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 Badgley : 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. Craig : 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šna : 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 Pitman : 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 Tomeij : 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.