CSS HR tag in FireFox

[tonynoriega]

Here is what i got on my html page:

<hr />

in my stylesheet i have:

hr{
color:#ffffff;
size:3px;
width:100%;
}

but it is not rendering properly in FireFox...should i be doing something else...?

am i missing a hack?

[Marshall]

There is a hack involving a background image, but I hate to admit, I do not remember it off hand.

Another option is a <div>:

#line {
margin: 0;
padding: 0;
width: 100%;
height: 3px;
background-color: #FFF;
}

<div id="line"></div>

I have also done this with <p>

.line {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}

<p class="line"></p>

Hope this helps. If you search WebmasterWorld, I know the <hr /> problem has been discussed before.

Marshall

[lavazza]

This works across browsers, using a background image

HR {
background:url(../images/myImage.GIF) bottom left repeat-x;
clear:both;
margin-left:auto;
margin-right:auto;
margin-top:2em;
margin-bottom:2em;
padding-top:0.1em;
padding-bottom:0.1em;
text-align: center! important;
width:100%;
}