Can I use CSS to reduce whitespace around HR's?

Dev Shed Forums Sponsor:

January 26th, 2001, 01:49 PM

Underseer

Junior Member

Join Date: Jan 2001

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

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?

January 26th, 2001, 04:28 PM

oskar

Contributing User

Join Date: Nov 2000

Location: Copenhagen, DK

Posts: 222

Time spent in forums: 2 h 50 m 40 sec
Reputation Power: 8

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.

)

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

Viewing: Dev Shed Forums > Web Design > CSS Help > Can I use CSS to reduce whitespace around HR's?

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump