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.
Instructions:
- Mark up your pages with semantically correct <hr /> tags.
- Style the horizontal rules however you like in your default stylesheet. (You'll probably be using a background image.)
- Prepare a second stylesheet, which we'll feed only to IE by using conditional comments. It should contain two rules: one which sets
display: none;on all<hr />elements, and one which describes alternate rules fordiv.iehrfix. You can use the demo stylesheet as a starting point. - Download iehrfix.js.
- Place the following code in the
<head>of your document:<!--[if(IE 6)|(IE 7)]> <link rel="stylesheet" type="text/css" href="/path/to/iehrfix.css" /> <script type="text/javascript" src="/path/to/iehrfix.js"></script> <![endif]-->
That's it! Browsers other than IE 6 and 7 will completely ignore the added code. IE 6 and 7 will execute it on page load; if JavaScript is disabled, <hr /> elements will simply be hidden altogether. (IE 8 handles horizontal rules correctly, and doesn't need the fix.)
Comments
No comments yet.