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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post 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;
}
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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"
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply