Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

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:


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

Any ideas??
  • 2
1 Solution
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
p.s. tiny.gif is nothing but a  1*1 transparent gif that I used as a placeholder
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.
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.
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.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now