Is there a way of removing the groove look of an HR through CSS? I want to avoid using the noshade attribute. If I do use noshade, it causes other side-effects (background image is not tiled/rendered properly, background colour incorrect)
Styling <hr>s can actually be quite tricky. Take a look at these pages:
http://www.bath.ac.uk/~cs1spw/blog/archive/2002/06/17/#stylingHR
Unfortunately all the things that are suggested are things I’ve already tried, e.g.
border:none;
and
border:0px solid #fff;
Any other ideas, anyone?
have you tried a div with a top border?
ie:
<div style=“height:1px; width:200px; border-top:1px solid black;”>
</div>
You could change the padding, width, colors etc to suit your page. This can also be added to the bottom of a paragraph, h1 tag etc if you want to underline something.
ie:
<h1
style=“border-bottom: 1px dashed black; padding-bottom:0px; color:#c0c0c0;”>Heading with dashed underline</h1>
I’ve used stuff like this a few times and have dropped using the hr tag completely 
Won’t work for two reasons:
a) Needs to work in Netscape 4. Div does not stretch all the way across. If I do apply 100%, it does not do 100% of container, but instead whole page … oops
b) I am more interested in the background image than the border, so it’s not a simple fix
Thansk for trying to help. I’ll be honest though, I’ve given up on this one now!