Styling a hr for internet explorer

html css internet-explorer-7 internet-explorer-6
Qwibble picture Qwibble · Jan 7, 2010 · Viewed 20.5k times · Source

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

matt picture matt · Dec 8, 2010

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

Related questions

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. …

Read More
CSS doesn't apply to dynamically created elements in IE 7?

Still looking for an answer. Changing or reassigning to the filter's innerHTML successfully redraws the element, but breaks my script, so that's out. Adding additional child nodes, including text nodes, does not force a redraw. Removing the added node does …

Read More
:after and :before css pseudo elements hack for IE 7

I am using :after and :before css pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?

Read More