I’m sure this saved me lot’s of time!

p.h {
margin: 0;
padding: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #999;
}

<p class=”h”></p>

As a bonus, text inside the (otherwise empty) paragraph will work nicely and can be styled appropriately - color: #999; font-size: 0.75em; text-align: right; etc…

I have no proper test case at the moment, but if you add background colors to the hr elements, you should be able to see the gap.

you get top and bottom margins.

I can also confirm that it does work in ie6/FF, but not working in ie7.

It really sucks because it forces me to use things like

<div class="line"></div>

Which is bad semantically, and not to mention if it gets used alot, it is 5 times as many characters as <hr /> or <hr>

Thanks for your suggestion!
I haven’t access to IE 7 right now, but I can confirm that it works fine in Firefox, Safari and (almost) IE 6. In IE 6, I actually get a 1 pixel gap beneath, but I guess this is as close as we can get.

I’ve been struggling with this issue for quite a while now.
The main problem with the 7px top margin can be fixed as stated above:

margin:0px !important; //for non-IE, !important keeps it there
margin:-7px 0; //for IE

However, on this approach we still have to fix the bottom margin.
Your assumtions that HR is handled similar to text are not 100% correct but not incorect either.
I have found out that HR actually is set to inline (as most text is).
Therefore the most obious conclusion is to reset the display to

display:block;

This actually tells IE to stop acting like a bitch and use it as a box. So, final code is:

hr {
height:1px;
display:block;
margin: 0 !important;
margin: -7px;
color:#798c7c;
background-color:#798c7c;
border:0px;
}

Works like a charm on FF and IE6 (I don’t have IE7 yet so I can’t guarantee for it since it depends on how IE7 acts on !important).

Hope this helped (Battle won).

Sincerely,
Michael Potra

Well, that can be one approach, but that means that you will always need to know the context th hr element is in, which I’m striving to get away from.

Kiper,

It sucks, doesn’t it?

Please, Robert, no more HeadeRache!

I never use a div.hr or something like that, but rather add borders to existing elements placed directly above or around the hr’s.

On it’s own, it doesn’t work for me. I think the key phrase in your comment is:

The hr is stuck in between floats.

I can imagine that that might work, but what I’m looking for is a standalone solution that isn’t context-sensitive whatsoever.

After reading the article the other night I came to the same conclusion as Anton but it seemed so obvious that I was sure I was doing something wrong. However, my site is now pixel perfect for the first time in that particular area. Since I don’t consider myself either a guru or expert I’ll give you what I think might be good to know.

IE gets html4/strict and the rest get xhtml11 if they want.

The hr is stuck in between floats.

I’ve checked it in FF1.5 & 2.0, Opera9.1, IE5-7 on XP. No Mac

The CSS looks as follows (which obviously won’t work in IE7):
hr {
clear:left;
margin:0;
_margin:-7px 0;
border:0;
padding:0;
height:0;
background:#FFF;
color:#FFF;
display:block;
}

It seems that it is display: block that’s pulling things together which is strange since I thought hr was a block level element but we’re targeting IE right? I also tried it with width and text-align and it still worked.

It’ll be interesting to hear if this works or if it’s some weirdness in my code doing the magic.

Cheers

Unfortunately, no. It works for the top margin, but not the bottom one (all in IE, of course).