Styling Horizontal Rule (hr) Tags with CSS
Added: January 17th, 2007 (tagged with: coding, css)
When developing an HTML template for a new site I am working on at work, I ran into an issue when trying to style a horizontal rule so that it appears the same way across all browsers. Rule number one when I design the style sheet for a web site is to remove all margin and padding settings to square all browsers: * { margin: 0px; padding: 0px; }. This removes most of the issues regarding rendering differences in Firefox and Internet Explorer (and Opera, Safari, etc.). Issues still arise, mainly in styling Unordered Lists (<ul>), but a majority of the differences are resolved with that one rule. As I have found out, horizontal rules fall outside that rule.
Here is a list of some of the Horizontal Rule quirks I have run across:
- In Internet Explorer, the horizontal rule element has some type of margin that cannot be removed with CSS. There is always space above and below the
<hr>tag. - The
colorattribute can be set in Internet Explorer, Firefox ignores this attribute. - Internet Explorer will draw a short gradient fade as the background-color unless one is specified.
- The
heightattribute has little consistent effect. If you are not using borders, the height is the inner height. If you are using borders; in Firefox, borders will always be rendered until height matches the total height of the top and bottom border, then the inner height will start to grow; in Internet Explorer, will draw a 1px line no matter what, and progressively more of the border as the height increases until they match in size, then the inner height will start to grow.height: 0px; border: 1px solid #000;will render the 2px of border with no inner height in Firefox, 1px of border with no inner height in Internet Explorerheight: 1px; border: 1px solid #000;will render the 2px of border with no inner height in Firefox, 1px of border with no inner height in Internet Explorerheight: 2px; border: 1px solid #000;will render the 2px of border with no inner height in Firefox, 2px of border with no inner height in Internet Explorerheight: 3px; border: 1px solid #000;will render the 2px of border with 1px inner height in Firefox, 2px of border with 1px inner height in Internet Explorerheight: 3px; border: none; background-color: #000; color: #000;will render 3px of inner height in Firefox and Internet Explorer
The point of this post is that horizontal rules are a pain to style cross-browser. If you want dividing points in your document for visitors who do not see style sheets, wrap your <hr> tags with <div> tags, style your division elements and don't display your horizontal rule elements:
CSS:
div.hr { margin: 5px 0px; border: none; border-top: 1px solid #D3D3D3; }
div.hr hr { display: none; }
HTML:
<div class="hr"><hr /></div>
This way, people who come to your site able to see styles will see what looks like a stylized horizontal rule, and people who cannot see styles will still see the divisor.
Example Styled
.png)
Example Unstyled
.png)
