#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    1
    Rep Power
    0

    Question


    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?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Location
    Copenhagen, DK
    Posts
    231
    Rep Power
    15
    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]

IMN logo majestic logo threadwatch logo seochat tools logo