Styling a hr for internet explorer

Question

Hey, in my quest to create as image light a site as possible, I'm looking to create two tone hr's.

I've achieved this in modern browsers, but want to achieve the same effect in ie6 and 7.

The current code I am using is

hr {
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    border-left:0px; 
    border-right:0px;
}

I've tried, with no success to make this work in ie6 and 7 without having to target the browsers specifically. Any thoughts?

(Heres my current project where I am employing this code, and looking to make it cross browser - http://www.qwibbledesigns.co.uk/preview/aurelius/ )

Cheers

Matt

Solution 1

Try something like the following instead (and replace the <hr> with a <div>)

div {
    /* no need for border-left/right with the following: */
    border: none;
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%;
}

(and don't forget to add an id or class to prevent all divs to look odd)

NOTE: this works on IE7, IE8 and on compliant browsers. Probably needs more tweaking for the 10 year old IE6, or even needs an image-hack (as so often).

Solution 2

I havent seen any good answer for this but though my own work figured out the following code should work for styling a HR to look consistent in firefox, safari, chrome and IE (not sure if it works below IE7).

hr {
    color:#bfbfbf; /*used for IE, top color*/
    background:#bfbfbf; /*firefox and chrome, top color*/
    min-height: 0px;  /*required to get IE to render the top pixel color*/
    border-left: 0px; 
    border-right: 0px; 
    border-top: 1px solid #bfbfbf; /*Your top color*/
    border-bottom: 1px solid #ffffff; /*Your bottom color*/
}

Solution 3

If you're clients have already plastered the site with < hr > tags you can just style hr as well as the hr class then swap < hr > tags out for in ie6 and ie7.

Use the css posted by Abel:

hr, .hr {
    /* no need for border-left/right with the following: */
    border: none;
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%;
}

Then in your js file just put:

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) {
    $("hr").replaceWith('<div class="hr"></div>');
}

obviously jQuery is required for this fix, but it worked well for me.

Solution 4

I think that the easiest way is to use <div class="hr"></div> instead. Styling <hr/> cross-browser is head-breaking, in my experience.

Solution 5

hr 
{ 
  /* hr css reset */
  color: white; /* if parent element's background is white - old ie versions fix */ 
  border: 0; 
  background: transparent; 
  height: 0;
  margin: 0;
  /* hr css reset end */
  /* custom styles */
  margin: 20px 0;
  border-top: 1px solid red; 
}

View more solutions

Comments

[Qwibble]

That's worked in ie7, but in ie6, when I place the margin-bottom:20px; that I want on all <hr />'s, it add's the padding, but also puts space between the two borders. I tried setting line-height:0 which didnt work. I set font-size:0; and achieved making the gap between the borders much smaller, but still no cigar. You can view the results here; www.qwibbledesigns.co.uk/preview/aurelius/index.html Any thoughts?

[Aisah Hamzah]

getting things to work in IE6 requires a different ballgame (and a lot of frustration and time, which is why so many companies leave IE6 alone). Consider fixing it programmatically (i.e. with a JS onload). Also: make sure there's some content, like   in the div. If nothing works, use the trick that they used 10 years ago when IE6 was born: make an image, stretch it. That's one method that always works.

[Qwibble]

Beautiful, '&nbsp;' did the trick, a big thanks to you man. I started coding long after IE6, so am not as well read up on these kind of tricks =)

[neatlysliced]

Unfortunately, this method loses all semantic meaning of the HR. And users wanting to style the HR in a CMS text editor for end users will be sad.

[dmnc]

This should have more votes. It is actually about how to style the <hr>, getting around IE idiocy. For me the color declaration to deal with weird side borders when there is height was the secret.

[user2867288]

There are so many problems with this, especially if you have any sort of Javascript DOM generation in your web application. Matt's pure CSS solution is the way to go.