Changing hr in Mozilla using CSS

How can I make an <hr> solid instead of those terrible double lines?

[MatthewHSE]

Hi folks,

The subject line pretty much says it all. I'm using <hr>'s here and there to pretty good effect in IE. But, Mozilla displays <hr>'s as terribly ugly double lines. How can I use CSS to make them display the same in Mozilla as they do in IE?

Thanks,

Matthew

[DrDoc]

Have you tried setting its height?

[glengara]

Noshade might work.

[MatthewHSE]

Thanks guys! Drdoc, I tried setting its height to 20px just to see what it did, and it drew a hollow box 20 pixels tall. Glengara, how would I use noshade like you suggest?

Thanks,

Matthew

[glengara]

I use it like this:
<HR size="4" noshade WIDTH="85%">
gives a solid grey line.

[Arcangel]

What I hate is the hr is still the ugly grey color in ns or opera. I came up with this to make colorful hr's no matter what browser is being used.

in the .css file I put this:

/* Solution to make hr appear to have color in non IE browsers */
table.hr { border-style:solid; border-color:#600030; border-width:1px; }

and in the page itself I put this:

<table border="0" width="100%" class="hr" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#600030"><img src="img/blank.gif" width="1" height="1" border="0"></td>
</tr>
</table>

I now have what looks like an hr in all browsers. Sure it's more code but I like it to look the same in all browsers if possible

[DrDoc]

Why use the table?

<img src="img/blank.gif" width="500" height="1" border="0">

Just make sure the image is the color you want, or give a background color using CSS.

[glengara]

Anybody know if that will validate?
I used to use colour in HRs until I decided to validate according to W3C.

[pageoneresults]

I've been creating a generic class like this...

.bt{border-top:.05em solid #999;padding:.5em 0 0 0;}

And then assigning that to the block level element that gets a horizontal rule above it.

P.S. Works fine in those browsers I tested it in and it validates. It is not semantically correct but it beats dealing with the hacks to accommodate the different browser interpretations of <hr>.

[choster]

I do like pageoneresults,

<style type="text/css">
h2.sectionheader {border-top: 1px solid #c00; padding-top: 0.5em}
p.colophon {border-top: 2px solid #999; padding-top: 0.35em}
</style>
[...]
<h2 class="sectionheader">Post-Husserlian Widget Theory</h2>
[...]
<p class="colophon">
Copyright © 2003 Center on Widget Studies, All Rights Reserved.
</p>

Presentation aspects of <hr> were deprecated in HTML 4.01, although they are not invalid. IIRC in XHTML the attribute should be expressed as noshade="noshade" and you also need to close the tag with a />.

[drbrain]

Set the border to solid and make the border and background colors the same:

<hr style="border: solid red; background: red">

[SuzyUK]

I use something like this..

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

then in the CSS:

.hr{
display: block;
height: 2px;
line-height: 2px;
background-color: red;
color: #000;
width: 80%;
margin: 0px auto 10px auto;
padding: 0;
}
.hr hr{display: none;}

this will 'remove' the default <hr> from the screen but leaves you with a <div> which you can style accordingly (put a background graphic in it if you want ;)), but on non CSS browsers you will still get an <hr>

Suzy