Posts tagged "horizontal rules"
Styling horizontal rules in Internet Explorer 6 & 7
Scott Klarr has a nice post about the difficulties of styling horizontal rules with CSS—owing mainly, of course, to problems in Internet Explorer.
In short, IE 6 and 7 insist on putting a border around horizontal rules, no matter how you set up your stylesheet.
Scott offers a simple but elegant solution which relies on jQuery. That's fine if you're already using jQuery in your project, but if you're not, it's hard to justify the extra payload to fix a simple cosmetic issue.
I've written a standalone version of Scott's script. At less than 350 bytes, it's a very lightweight solution, and it's easy to implement. Here's a demo page. As Scott's post explains, it simply replaces all <hr /> elements with <div class="iehrfix"></div> in the affected versions of IE.