Styling the <hr> tag?

Hi,
Is it not possible to remove the default margins on an <hr> tag in IE. I’ve done everything I can think of but still can’t get IE to give up it’s top and bottom margins.

In this test case you will see that there are no margins or paddings on the p tags and FF renders the hr flush between them. That is what I am wanting IE to do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cross-Browser Horizontal Rules</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">

* {
margin:0;
padding:0;
}
body {
background: #fff;
}
h2 {text-align:center; margin:20px 0; color:#000;}
#wrapper {
    width:900px;
    margin:20px auto;
    border:1px solid #000;
    background:#EEF;
}
hr {margin:0; padding:0}
hr.small { text-align: left; width: 800px; height: 2px; color: #006600; border: none; } /* For Internet Explorer */
html>body hr.small { margin-left: 0; width: 800px; height: 2px; background-color:#006600; border: none; } /* For Good browsers */

hr.large { text-align: left; width: 800px; height: 5px; color: red; border: none; } /* For Internet Explorer */
html>body hr.large { margin-left: 0; width: 800px; height: 5px; background-color:red; border: none; } /* For Good browsers */

</style>
</head>
<body>
<h2>Cross-Browser Horizontal Rules</h2>
    <div id="wrapper">
        <p>I am wanting to get IE to give up it's default margins on the hr tags but it doesn't want to budge.<br>
        Is there anything that can be done about this? I want to be the one that is in control of the margins!
        </p>
    <hr class="small">
        <p>Lorem ipsum dolor sit amet consectetuer porta at Vestibulum nulla nonummy. Feugiat Ut Donec pretium 
        augue sem Curabitur quis eros vel Ut. Velit Maecenas id faucibus pede Curabitur ut netus laoreet amet 
        Quisque. Vitae felis Nulla eleifend enim pede porta sed Pellentesque eget ligula. Volutpat ligula velit 
        sodales consectetuer vitae dictumst sem dictumst.</p>
    <hr class="large">
        <p>Lorem ipsum dolor sit amet consectetuer porta at Vestibulum nulla nonummy. Feugiat Ut Donec pretium 
        augue sem Curabitur quis eros vel Ut. Velit Maecenas id faucibus pede Curabitur ut netus laoreet amet 
        Quisque. Vitae felis Nulla eleifend enim pede porta sed Pellentesque eget ligula. Volutpat ligula velit 
        sodales consectetuer vitae dictumst sem dictumst.</p>
    <hr class="small">
        <p>Lorem ipsum dolor sit amet consectetuer porta at Vestibulum nulla nonummy. Feugiat Ut Donec pretium 
        augue sem Curabitur quis eros vel Ut. Velit Maecenas id faucibus pede Curabitur ut netus laoreet amet 
        Quisque. Vitae felis Nulla eleifend enim pede porta sed Pellentesque eget ligula. Volutpat ligula velit 
        sodales consectetuer vitae dictumst sem dictumst.</p>
    </div>
</body>
</html>

I usually do the HR like this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Ruleset For More Consistent <hr> Style</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">

div{ margin:20px; border:1px solid #ccc; background:#ffe}
h1,h2{ margin:0; border-bottom:1px solid #ccc; text-align:center; font:16px/1.2 arial; color:#333}
p{ margin:0; border-bottom:1px solid #ccc; font-size:0}

.styled hr{
  border:0;                   /* for FF; border reset */
  border-top:10px solid gold; /* set hr thickness for good browsers, set style and color for all */
  height:10px;                /* set hr thickness for IE */
  background:transparent;     /* for Opera and Safari; remove default hr color */
  font-size:14px;             /* for FF to mimic the fix "margins" on hr in IE */
}
.styled .hr1{
  border-top:1px solid red;
  height:1px;
}
.styled .hr2{
  border-top:2px solid blue;
  height:2px;
}
.styled .hr5{
  border-top:5px solid green;
  height:5px;
}
</style></head><body>

<h1>Horizontal ruler size and spacing styled for Firefox and Internet Explorer</h1>

<div><h2><hr> default / <hr size=1 red> / <hr size=2 noshadow blue></h2>
<hr><p></p>
<hr size="1" color="red"><p></p>
<hr size="2" noshade color="blue"></div>

<div class="styled"><h2><hr> consistently styled for FF & IE (in other space differ) 1px / 2px / 5px</h2>
<hr class="hr1"><p></p>
<hr class="hr2"><p></p>
<hr class="hr5"></div>

</body></html>

I think for FF and IE you can get the same reducing the effective margins, but not for all browsers.

Hi,

You can’t get IE to reduce its margins/height to 1px only (even with negative margins).

For consistency at 1px heights I always use a div and if you also want accessibility you could do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
    border-top:1px solid red
}
div hr {
    display:none
}
</style>
</head>
<body>
<div><hr /></div>
<div><hr /></div>
<div><hr /></div>
</body>
</html>


That will divide the page nicely if css is not applied.

You can’t get IE to reduce its margins/height to 1px only (even with negative margins).

That is what I had suspected, thanks for the feedback guys. :slight_smile: