Placing <hr>'s close together in IE

**Eileen Dover** · Feb 6, 2008 10:11

I'm trying to get three <hr> tags in a row to display close together. Works fine in Firefox but of course, IE spaces them out.

Here's some brief code and CSS.

Code HTML4Strict:

<!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" xml:lang="en" lang="en"> 
 
<head>
<title>Company name.</title>
 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
 
<link href="style.css" type="text/css" rel="stylesheet" />
 
</head>
 
<body>
 
<hr class="thick" />
<hr class="medium" />
<hr class="thin" />
 
 
</body>
 
</html>

Code CSS:

body, p, h1, h2, h3, h4, h5, ul, ol, hr {
	margin: 0;
	padding: 0;
}
 
.thick {
	height: 7px;
	width: 700px;
	color: #bcbcd8;
	background-color: #bcbcd8;
	margin-bottom: 2px;
}
 
.medium {
	height: 5px;
	width: 700px;
	color: #bcbcd8;
	background-color: #bcbcd8;
	margin-bottom: 2px;
}
 
.thin {
	height: 3px;
	width: 700px;
	color:#bcbcd8;
	background-color: #bcbcd8;
	margin-bottom: 2px;
}

Removing the bottom margin doesn't help in IE, and makes them display too close in Firefox.

Any ideas?

Thank you!

**Paul O'B** · Feb 6, 2008 11:52

Hi,

IE puts about 14px of space around the hr that can't be removed by any known means (other than absolutely positioning each rule into place (which probably isn't feasible).

You should use a border-color on a div instead which is completely controllable. If you need an hr in there for semantic reasons then you can place it in the div and set it to display:none or move it off screen with absolute positioning.

**brdnwi** · Feb 6, 2008 12:42

I agree with paul. Use a div tag. It looks though that you want your hr's in a column, not a row. Your trying to stack them on top of each other right, with the top <hr> thicker than the one below it. I'd still use a div, but in your case I would use two divs.

Code:

<div style='border-top:5px solid lightblue; border-bottom:1px solid lightblue; width:300px;'>
<div style='border-top:3px solid lightblue; margin-top:2px; margin-bottom:2px;'>
</div>
</div>

In the first div you can set the width to your choosing. Works in both FF and IE.

**Eileen Dover** · Feb 6, 2008 12:48

Thanks for the replies! Darn IE, get yer pixels outta my stuff!

OK, I ended up using 3 div's with top border and a margin. When I used a div within a div, the middle line was too short (horizontally). With 3 div's, they work and I can position them where I need.

Thanks again!

User Tag List

Thread: Placing <hr>'s close together in IE

Thread Tools

Display

Placing <hr>'s close together in IE

Bookmarks

Bookmarks

Posting Permissions