miraclemaker
Programmer
Anyone know how I can control the vertical spacing of an <hr> tag? I've tried every combination of border, padding and margin, but none of them seem to be able to get rid of the default padding (which is rather large)
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
vertical spacing in <hr> tag
- Thread starter miraclemaker
- Start date
- Status
What exactly do you want to achieve?
Something like this:
<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
line 1
<HR style="margin-top:-8px; color:red">
line2
<HR style=" color
range">
line3
<HR>
</BODY>
</HTML>
Hope this helps. If not, then tell us what you exactly want.
Erik
<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
Something like this:
<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
line 1
<HR style="margin-top:-8px; color:red">
line2
<HR style=" color
range">line3
<HR>
</BODY>
</HTML>
Hope this helps. If not, then tell us what you exactly want.
Erik
<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
Look at it from different angle. It might now be the problem of HR tag, but P or TABLE or DIV on top or bottom of it.
instead of
<hr style="margin-top: -8px;" />
<p>here</p>
try
<hr>
<p style="margin-top: -4px;">here</p>
hope this helps. it's all about the angles.
-blekrok
aka. angleman
instead of
<hr style="margin-top: -8px;" />
<p>here</p>
try
<hr>
<p style="margin-top: -4px;">here</p>
hope this helps. it's all about the angles.
-blekrok
aka. angleman
- Thread starter
- #4
miraclemaker
Programmer
Hmm, it's almost there, the thing is when I get it working and looking ok in ie, it looks completely messed up in Opera. It seems that ie wrongly adds a default border, but Opera does not.
That way if you try and set margin-top to a negative value (for either the hr itself or for a following component, while it looks ok in ie, in Opera, the text ends up being *ontop* of the hr.
That way if you try and set margin-top to a negative value (for either the hr itself or for a following component, while it looks ok in ie, in Opera, the text ends up being *ontop* of the hr.
- Thread starter
- #6
Yep...but I think blekrok's idea would work, too.
<hr style="line-height:85%;color:red;height:5px">
or
<hr style="margin-top:-10px;margin-bottom:-10px;color:blue;height:5px">
I've noticed sometimes that the margin:-10px won't work by itself...but the margin-top and margin-bottom together does.
Let us know what happened...
<hr style="line-height:85%;color:red;height:5px">
or
<hr style="margin-top:-10px;margin-bottom:-10px;color:blue;height:5px">
I've noticed sometimes that the margin:-10px won't work by itself...but the margin-top and margin-bottom together does.
Let us know what happened...
Actually, that doesn't work either...heh heh.
However, this does:
<style>
.line{width:100%;border-top:1 solid #ff0000;line-height:0%;font-size:1px;margin-top:1px}
</style>
</head>
<body>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
Adjust accordingly...
However, this does:
<style>
.line{width:100%;border-top:1 solid #ff0000;line-height:0%;font-size:1px;margin-top:1px}
</style>
</head>
<body>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
Adjust accordingly...
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question