Hr Tag in IE - Remove Border

Question

On browsers other than IE7 and below, hr displays a frame around the hr tag that I don't want.

<!--[if lte IE 7]> <style type="text/css"> hr { margin: -3px 0 0 0; padding: 0; height: 19px; border: none; outline: none; background: url("img/split.png") center no-repeat; } </style> <![endif]--> 

I tried this solution, but it still has a border around it.

It looks like this:

alt text http://i46.tinypic.com/dpdabm.jpg

How do I get rid of it?

Answer 1

See http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

It seems that this problem is not there, only with the help of hacking (using the surrounding div).

Answer 2

To avoid these problems, you can use DIV tags instead. To make it available, enter HR like this:

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

then apply styles to it:

 .ruler { border-top: 1px solid black; } .ruler hr { display: none; } 

This will hide HR and make the DIV a horizontal ruler.

Answer 3

Different browsers have different models for the hr element. This is why I use this:

 hr { height: 1px; color: #ccc; background-color: #ccc; border: 0; } 

This works in all major browsers. There is only one problem: IE7 and fields ...

Answer 4

Use only

 border:0px 

as

 border:none 

not a rule.

http://www.w3schools.com/cssref/pr_border-style.asp