What happened to the horizontal rule?

[zach4618]

Hi my name is Zach, I am new to codingforums.com. I have been trying to get the horizontal rules to display the way I want in both FireFox and IE, but so far I have not succeeded. I did a little research, and found that all presentational attributes of the hr element were deprecated for HTML 4.01. Naturally, I used a class instead. This produced the desired result in IE, but FireFox didn't format the rule at all. I'm almost ready to just forget the hr completely and go with a div with a top border or an image. Anyone got any ideas?

[Excavator]

Hi zach4618,

These all validate: http://www.nopeople.com/CSS/hr/

both CSS and XHTML 1.0 Strict


What were you trying?

[zach4618]

Heres the code:

HTML:

<hr class="hr1" />

CSS:

.hr1 {
color: #aaa;
height: 1px;
}

[Excavator]

color: #aaa;
is asigning color to text. Use background-color: #aaa; to see it on the hr.



.hr1 {
background-color: #aaa;
height: 1px;
margin-top: 10px; /*just to move it down from the top of the page so you can see it*/

}

[zach4618]

Still getting a 2px hr. I have found a solution however. Just set the border to the same color as the background, then set border top to 1px solid #aaa.

[zach4618]

color: #aaa works in IE, not in Firefox. background-color: #aaa works in Firefox, but not in IE.

[Excavator]

Wow, who knew? I wonder why...

Seems to work if you specify both.

[andrewmta]

I ran into the same problem and I've been using this code:

<hr style="height: 2px;color: #c8c8c8;background-color: #c8c8c8;border-top:1px solid #ffffff;">