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

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 3

Try this: http://blog.neatlysliced.com/2008/03/hr-image-replacement/

Answer 4

Look here (javscript-technique): http://www.eleqtriq.com/2010/02/stylinghr/