I hate the extra whitespace above and below horizontal rules (HR) so I generally avoid using them. Since I've recently started playing around with CSS, I'm trying to figure out how to remove that extra whitespace above and below HR's, but can't seem to manage it with margins, padding nor linespacing.

Anyone have any ideas? Is there a way or am I doomed to failure?

Well, I guess it's "out of law", but try this:

<html><head>
<style type="text/css">
.line1 {margin-top: 10px; margin-left: 40px; z-index:2}
.line2 {margin-top: -8px; margin-left: 40px; z-index:1}
.line3 {margin-top: -8px; margin-left: 40px; z-index:3}
</style></head>
<body>
<span class="line1">Here's some text</span>
<hr class="line2">
<span class="line3">Here's some more text</span>
</body></html>

It looks fine in Netscape 4.7. Removing the margin-left properties will mess it up.

For Netscape 6 try this class-style:
<style type="text/css">
.line1 {margin-top: 10px; z-index:2}
.line2 {margin-top: -10px; margin-bottom: -10px; z-index:1}
.line3 {z-index:3}
</style>

For Ie 5.5 try this:

<html><head>
<style type="text/css">
.line1 {margin-top: 10px; margin-left: 40px; z-index:2}
.line2 {margin-top: 0px; margin-left: 40px; z-index:1}
.line3 {margin-top: -28px; margin-left: 40px; z-index:3}
</style></head>
<body>
<div class="line1"><hr></div>
<div class="line3">Here's some text</div>
<div class="line2">Here's some more text</div>
</body></html>

Had to use the div-tags to having the line after the hr-command "coming up"

There may be some other solutions, but this is what I figured out in first hand. But try playing around with the code.
Steffen

UPS!
Reloading the page in NS4.7 and NS6 after applying the div-tags, only came up with a tiny little difference. So the last code (for Ie 5.5) must be the one to use. :o)

[Edited by oskar on 01-26-2001 at 03:33 PM]