Unique Horizontal Rules: Techniques?

What do you suggest for making a precise/unique <hr />

[mhulse]

Hey all,

What are your techniques for making unique horizontal rules?

At the moment I am using this code to separate content:

/* CSS */
.line {
height: 5px;
padding: 0px;
background: url(../img/bg_3x6.gif) repeat-x left top;
margin: 0px auto 0px;
 }

Html:

<div class="line"></div>

The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE...

Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform.

Cool cool cool,
Thanks!
Cheers
Micky

[HarryM]

Try adding a font-size to the CSS with a size of 1pt.

I don't use it for HRs but for divs with a small height (a few pixels). I think without it IE picks up an inherited line height.

Or of course you could just use <hr> and apply styles to that to get the size and color.

[jetboy_70]

I use:

<div class="hr"><hr /></div>

with CSS like:

.hr {
height: 1px;
background:F00;
}

hr {
display: none:
}

It's an extra element, but the code stays accessible. You can add your graphical background to the div. HarryM's right about the font inheritance. That's what's causing your specific problem.

[mhulse]

Ah, thanks so much for the help! I really appreciate it. I have it working pretty good now, Thanks all! :D

Cheers,
Micky