<hr> margins won't go away

Discussion in 'HTML' started by Paul Furman, Feb 23, 2004.

  1. Paul Furman

    Paul Furman Guest

    For <hr> "horizontal rule" the vertical margin/padding seems not to
    respond to CSS suggestions.

    -----------------------
    big gap between
    -----------------------

    hr {height:1px;
    border: 0;
    color: black;
    background-color: black;
    margin: 0px 0px 0px 0px;
    }

    <html>
    <hr>
    <hr>
    </html>
    Paul Furman, Feb 23, 2004
    #1
    1. Advertising

  2. Paul Furman

    Nik Coughin Guest

    Paul Furman wrote:
    > For <hr> "horizontal rule" the vertical margin/padding seems not to
    > respond to CSS suggestions.
    >
    > -----------------------
    > big gap between
    > -----------------------
    >
    > hr {height:1px;
    > border: 0;
    > color: black;
    > background-color: black;
    > margin: 0px 0px 0px 0px;
    > }
    >
    > <html>
    > <hr>
    > <hr>
    > </html>


    Can't help you with that, but I can save you some typing. margin: 0; is the
    same as margin: 0px 0px 0px 0px;

    Also, no need to ever specify unit type when the value is 0. 0px is always
    the same as 0em or 0% or 0pt :)

    That said, I'm sure that that question has been asked here before. Try
    searching this ng for it.
    Nik Coughin, Feb 23, 2004
    #2
    1. Advertising

  3. Paul Furman

    Nik Coughin Guest

    Paul Furman wrote:
    > For <hr> "horizontal rule" the vertical margin/padding seems not to
    > respond to CSS suggestions.
    >
    > -----------------------
    > big gap between
    > -----------------------
    >
    > hr {height:1px;
    > border: 0;
    > color: black;
    > background-color: black;
    > margin: 0px 0px 0px 0px;
    > }
    >
    > <html>
    > <hr>
    > <hr>
    > </html>


    http://groups.google.com/groups?hl=en&lr=&ie=ISO-8859-1&q=hr css&meta=group=alt.html.*

    Your newsreader might not get the .* on the end of that link properly, if
    not copy and paste the link into a browser.
    Nik Coughin, Feb 23, 2004
    #3
  4. Paul Furman

    Paul Furman Guest

    Nik Coughin wrote:

    > Paul Furman wrote:
    >
    >>For <hr> "horizontal rule" the vertical margin/padding seems not to
    >>respond to CSS suggestions.
    >>
    >>-----------------------
    >> big gap between
    >>-----------------------
    >>

    >
    > http://groups.google.com/groups?hl=en&lr=&ie=ISO-8859-1&q=hr css&meta=group=alt.html.*
    >
    > Your newsreader might not get the .* on the end of that link properly, if
    > not copy and paste the link into a browser.


    Thanks, that helped, I guess this is the definitive answer:
    http://www.w3.org/TR/html4/present/graphics.html#edef-HR
    "The amount of vertical space inserted between a rule and the content
    that surrounds it depends on the user agent."

    For both IE & Mozilla it's a BIG space.

    I guess the workaround is:
    <div style=" border: solid #444 0; border-bottom-width: 1px;">
    content with a border below
    </div>
    Paul Furman, Feb 23, 2004
    #4
  5. Paul Furman

    Spartanicus Guest

    Paul Furman <> wrote:

    ><div style=" border: solid #444 0; border-bottom-width: 1px;">


    Invalid, border:1px solid #444

    --
    Spartanicus
    Spartanicus, Feb 23, 2004
    #5
  6. Paul Furman wrote:
    > Nik Coughin wrote:
    >> Paul Furman wrote:
    >>
    >>>For <hr> "horizontal rule" the vertical margin/padding seems not to
    >>>respond to CSS suggestions.


    It appears to be a problem with the minimum margin. As you increase the
    margin, browsers start to respond.

    [snip]
    > Thanks, that helped, I guess this is the definitive answer:
    > http://www.w3.org/TR/html4/present/graphics.html#edef-HR
    > "The amount of vertical space inserted between a rule and the content
    > that surrounds it depends on the user agent."
    >
    > For both IE & Mozilla it's a BIG space.

    [snip]

    Strangely, while Netscape gives quite a big space when margin is set to 0,
    Firefox (like Opera) doesn't.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Feb 23, 2004
    #6
  7. Paul Furman

    Paul Furman Guest

    Spartanicus wrote:
    > Paul Furman <> wrote:
    >
    >
    >><div style=" border: solid #444 0; border-bottom-width: 1px;">

    >
    >
    > Invalid, border:1px solid #444



    Yes, and:

    border: solid #444 0;
    border-bottom-width: 1px;

    should be simply:

    border-bottom: solid #444;

    (sorry 'bout the cut/paste mess)
    Paul Furman, Feb 23, 2004
    #7
  8. Paul Furman

    Paul Furman Guest

    Spartanicus wrote:

    > Paul Furman <> wrote:
    >
    >
    >><div style=" border: solid #444 0; border-bottom-width: 1px;">

    >
    >
    > Invalid, border:1px solid #444




    Yes, and:

    border: solid #444 0;
    border-bottom-width: 1px;

    should be simply:

    border-bottom: 1px solid #444;

    (sorry 'bout the cut/paste mess)
    Paul Furman, Feb 23, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Keith

    Setting margins on an ASP.NET page

    Keith, Nov 4, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    752
    Natty Gur
    Nov 4, 2003
  2. Chris D

    Re: Page Margins on an ASP.NET page

    Chris D, Nov 19, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    355
    Chris D
    Nov 19, 2003
  3. Bill Priess

    Re: Page Margins on an ASP.NET page

    Bill Priess, Nov 19, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    9,657
    Bill Priess
    Nov 19, 2003
  4. Chad
    Replies:
    4
    Views:
    8,314
  5. richard
    Replies:
    6
    Views:
    401
    Sherman Pendley
    Aug 3, 2008
Loading...

Share This Page