Changing the Default HR Picture with CSS. How?

[l3vi]

How can I change the default <HR> picture using CSS. Is it even possible? Thanks for the help in advance!:thumbsup:

[l3vi]

NEVER mind! I figured it out. Should've thought harder b4 I posted!

[Nightfire]

What's a <hr> picture?

<hr style="color:#ff0000;width:200px"> etc

[l3vi]

Yeah, but I wanted to change all the HR's on my page to a certain height and have them all be a certain image, not just a color or anything.

[Eddyd84]

So, if you want an image just put an image tag wherever you would put an <hr>. For example,
<img src="some_line.gif" alt="---" width="#" height="#" border="#" />

You can change the width and height from the inside image tag.

I hope this helps.
:D

[dreamingdigital]

<style type="text/css">
.line_orange {
width: 80%;
height: 1px;
border-style: solid;
border-color: orange;
}
.line_green {
width: 80%;
height: 1px;
border-style: solid;
border-color: green;
}
</style>

<hr class="line_orange">
<hr class="line_green">

[brothercake]

Originally posted by Eddyd84
So, if you want an image just put an image tag wherever you would put an <hr>.

The problem with that is - what if someone doesn't view images? There's nothing to indicate the line break. Whereas if you use CSS it degrades back to a normal <hr/>, which can still be represented. Check out

http://diveintoaccessibility.org/day_25_using_real_horizontal_rules_or_faking_them_properly.html (i had to not parse this URL because it was being improperly generated)

[Eddyd84]

Thanks for the link. I knew I saw that somewhere. :p