Forum Moderators: not2easy

Message Too Old, No Replies

Styling a <HR /> tag

margins above and below of a <HR />-tag

         

Mobull

3:42 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



I would like to make a html news-letter, but they gave me the orders not to use divs (tsk tsk tsk). Now I have a horizontal ruler, but it automatically adds spaces above and below the ruler. Can I get rid of them without using a picture or divs?

so just style the <hr /> tag?

thanks

Gibble

3:46 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



set the padding and/or margin to 0px with CSS (or whatever value you desire)

grahamstewart

3:48 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



they gave me the orders not to use divs

erm... why?

mipapage

3:51 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've never tried what you are doing, but maybe worth looking into [google.com]..

Mobull

4:53 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



Why...hmmm...well...have to explain it a bit better. I'm not making it. Someone else without real knowledge of layers etc. is. He asked me that specific question, but since I've never heard of changing the standard spacing of a hr tag, I wondered what you Guru's thought of it.

As to the padding and marging thing. That will not work. I tried that and also the line-spacing. But it just won't work. I think this is something which just cannot be done.

Purple Martin

10:00 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If the elements above and below the horizontal rule have any padding or margin, you will still see a space between them and the horizontal rule, even if the rule has no padding or margin. To remove the space completely, you'll have to style the elements above and below as well. It should work!

bruhaha

2:48 pm on Feb 20, 2004 (gmt 0)

10+ Year Member



PurpleMartin wrote:
To remove the space completely, you'll have to style the elements above and below as well.

This is generally the way to go, though on occasion, you may find it useful instead to assign a negative top margin to the <hr>.

Like this:
<hr style="margin-top:-20px">

The problem is that you can't quite do the same with a negative bottom margin for blocks following the rule. Browsers are inconsistent on how they implement such code (most simply ignore it). But at least it works in cases where you are only concerned about the space above the rule.

(In fact, in this case you can simply set the top margin in a stylesheet definition for "hr". That would allow you to avoid adding a special class --or inline styles--to distinguish the pargapraphs that precede a horizontal rule.)