Styling A Hr For Internet Explorer

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 ie

Solution 1:

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 2:

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 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: 20px0;
  border-top: 1px solid red; 
}