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

Answer 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).

Answer 2

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; 
}

Answer 3

Setting height to 2px solved the issue for me.

hr {
    margin: 1em 0 1em 0;
    border: none;
    border-top: 1px solid #000;
    height: 2px;
    display: block;
}

Answer 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.

Answer 5

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*/
}

Answer 6

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.