SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing <hr>'s close together in IE

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,782
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    I live in Madison. Where in the W1RLD do you live?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Last edited by Eileen Dover; Feb 6, 2008 at 13:01. Reason: Updated info


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •