PDA

View Full Version : <hr> background issues

animgirl
08-05-2005, 11:22 AM
Hello,

I have discovered an odd bug in IE.
I am working on a website and want to have a custom <hr> tag that contains a background image.hr {
background: transparent url(line.gif) no-repeat;
height:20px;
width:454px;
border:0;
text-decoration: none;
}
This works great in Firefox, but has an inset border around it in IE. I have tried many different methods, but none seem to take this border away. I've read around online and it seems the only way to be rid of it is to surround my <hr> tags with divs (source (http://www.sovavsiti.cz/css/hr.html)).

I would like to try and find a different method that wouldn't require me going through all of my code to add a div property, besides the curiosity of finding another way.

Thank you in advance,
Elise
Tarmithius
08-05-2005, 03:04 PM
Could you add a border color? Maybe keep the same 0 width but make the color the same as the background it is sitting on.
DCElliott
08-05-2005, 03:28 PM
OMGosh
Can it be
Is that an Animgirl we see?

There is no benefit I can see to adding a div around a <hr> since the div itself can be styled with the code supplied (except, perhaps it needs margin:0 auto; to achieve centering - and centering would be a problem with older IE) However, for completeness, you might want to combine the two in a slightly different way as suggested by: http://diveintoaccessibility.org/day_25_using_real_horizontal_rules_or_faking_them_properly.html

This would give something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
div.hr {
background: transparent url(line.gif) no-repeat;
height:20px;
width:454px;
border-style:none;
text-decoration: none;
margin:1em auto 0;}
}
hr {display:none;}
-->
</style>

</head>
<body>
<div class="hr"></div>
<hr />
</body>
</html>

Woot, woot - just like old times ;)

DE