Why do a get a grey box around my <hr> in IE when I apply a CSS background-image to it?

I get a 1px grey border around an <hr> when I apply:

-- background-image:url(/pix/hrBg.gif) --

in Internet Explorer only.
Netscape 6/Mozilla are fine as is Opera.

I have tried setting:

border:0px;
margin:0px;
padding:0px;
background-color:none;

I am not so bothered about the extra space but I just dont want a border around it.

Any ideas??
LVL 1
hensenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hexagon47Commented:
in my humble opinion the problem you have is that hr automatically has a 3d value given by the attribute noshade (that is - I think - your grey border)

I do not think there is a way around it for the hr tag

the code below should however give you an alternative solution

<div style="background:url(pix/mygif.gif);" ><img src="tiny.gif" alt="" width="1" height="1"/></div>

specify the width and the height of your div to give it the look and feel you want

hope I have been of help
h.
p.s. tiny.gif is nothing but a  1*1 transparent gif that I used as a placeholder
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BirdynumnumCommented:
You can get rid of the border by using the color CSS attribute. But sadly, it will cover over your background image.

Annoying, so I'd probably gor for a span or div too instead.
0
hensenAuthor Commented:
I am trying to make the site completely accessible to text only browsers and would like to use <hr> as a separator that is understood by Lynx etc.
0
hensenAuthor Commented:
hexagon47 thanks for that idea, I wrapped my <hr> in a <div> tag and put:

hr {display:none}

in my css, then formatted my div as you suggested.

This works in Lynx Mozilla NS6 IE Opera.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.