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

Posted on 2003-02-21
Medium Priority
Last Modified: 2012-06-27
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??
Question by:hensen
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2

Accepted Solution

hexagon47 earned 400 total points
ID: 7992746
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

Expert Comment

ID: 7993338
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.

Author Comment

ID: 7994465
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.

Author Comment

ID: 7994524
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

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month12 days, 6 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question