Page 1 of 1

Trying to style a horizontal rule in IE 6/7.

Posted: Mon Apr 23, 2007 5:51 pm
by Chris Corbyn
This seems so simple and obvious, but basically I'm now fixing some broken IE CSS on my rewritten website. Luckily most of the issues are aesthetic rather than strucutral but this one has me stumped. I tried styling my horizontal rules to be a chunky bar with a repeated diagonal stripe background. It works in FF, Opera, Safari. It almost works in IE, but in IE there are dark edges around two edges of the rule which I cannot seem to get rid of.

Code: Select all

hr {
  display: block;
  padding: 0;
  height: 20px;
  margin: 10px 0;
  background: none;
  background-image: url(/images/stripe.gif);
  border: none;
}
There are things in that CSS I've added in desperation but can anyone see where these dark lines are coming from in IE?

You can see the page at http://trunk.swiftmailer.org/ to know what I'm talking about (ignore the other CSS issues... I'm probably already working on them right now ;))

Cheers :)

EDIT | Never mind this fixes it, but contextually it's not what I wanted. At leats the rule will show in non-CSS browsers though :)

Code: Select all

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

Code: Select all

div.rule {
  height: 20px;
  background-image: url(/images/stripe.gif);
  margin: 10px 0;
}

div.rule hr {
  display: none;
}

Posted: Mon Apr 23, 2007 8:06 pm
by Ambush Commander
Yeah, that looks hacky, but it's probably necessary if Internet Explorer does not give you a way to remove the bevel.

http://dhtmldev.com/content/view/13/27/ might be helpful, as well as the google "css hr internet explorer"

Posted: Tue Apr 24, 2007 12:48 am
by matthijs
Can't you just style the bottom of the existing divs? Like div.textual. Style the bottom border or give it a repeating background-image at the bottom and some extra padding. No need for extra markup then.

Posted: Tue Apr 24, 2007 1:16 am
by Chris Corbyn
matthijs wrote:Can't you just style the bottom of the existing divs? Like div.textual. Style the bottom border or give it a repeating background-image at the bottom and some extra padding. No need for extra markup then.
I want the horizonal rule to be there if CSS is turned off. Otherwise, yes, I would just do that :)

Posted: Tue Apr 24, 2007 6:41 am
by matthijs
Aha. Well then style the div like I said and do

Code: Select all

hr { display:none; }
For your hrs..

I've seen this solution quite often. Styling hrs is (supposed to be) a trouble.