<hr> margins won't go away

P

Paul Furman

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>
 
N

Nik Coughin

Paul said:
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.
 
N

Nik Coughin

Paul said:
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.
 
P

Paul Furman

Nik said:
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>
 
B

Barry Pearson

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.
 
P

Paul Furman

Spartanicus said:
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)
 
P

Paul Furman

Spartanicus said:
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)
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top