Wickham's HTML & CSS tutorial

Sitemap | Home | General Advice

Horizontal Rule

Although you might think this is a very easy tag to code, browsers behave very differently. The basic code is <hr> but some browsers need a height. All browsers use the color property, but Firefox, Opera and Safari need background-color to fill the middle when the height is 2px or more. All browsers can show a border around a horizontal rule in certain circumstances when the height is 2px or more.

Look at the following examples in IE, Firefox, Opera and Safari and you will see differences. Google Chrome is based on the same WebKit engine as Safari.

The <hr> tag has been given a new lease of life in HTML 5. See w3.org where it says The hr element now represents a paragraph-level thematic break.

Plain <hr> below with no height, no color, no background-color and no border style; default height is 2px which is often made up of a top and bottom border next to each other. Safari seems to have a top border but no bottom border and consequently a thinner line.


Hr with style="height: 5px;" below. Safari seems to have a top border but no bottom border. IE and Firefox have a darker colored top border than the bottom border. Opera has the same color to top and bottom borders.


Hr with style="color: lime; height: 5px;" below. Safari seems to have a top border but no bottom border and no color. Firefox and Opera have lime color only to the bottom border. IE6 and IE7 show solid lime color with no borders but IE8 and IE9 show no color.


Hr with style="background-color: lime; height: 5px;" below. IE6, IE7 and Firefox show dark gray top and light gray bottom border with lime color infill. Opera shows dark gray top and bottom borders with lime color infill. IE8, IE9 and Safari show light gray top and no bottom border with lime color infill.


Hr with style="background-color: lime; border: none; height: 5px;" below. IE8, IE9, Firefox, Opera and Safari show solid lime color with no borders but IE6 and IE7 show borders.


Hr with style="color: lime; background-color: lime; height: 5px;" below. IE6 and IE7 show solid lime color with no borders. Firefox shows dark gray top and no bottom border with lime color infill. IE8, IE9, Opera and Safari show light gray top and no bottom border with lime color infill.


Hr with style="color: lime; background-color: lime; border: none; height: 5px;" below. IE, Firefox, Opera and Safari show solid lime color with no borders.


Hr with style="color: lime; background-color: lime;" below (no height stated). IE6 and IE7 show 2px solid lime color with no borders but IE8 and IE9 show no color. Firefox and Opera show lime color with a gray top border. Safari shows light gray top border and no bottom border but no color unless you add border-style: solid; or a height with border: none;


Recommendations

hr { height: 2px; color: #de7008; background-color: #df7109; border: none; } as shown below:-


or for greater height like 5px:-


I've shown the background-color with a slightly different code from the color because search engines don't like it if you use the same color code; they think you are trying to hide something and may apply a slightly lower ranking to your page.

Background-image for horizontal rules

All major browsers allow setting a background-image of the <hr> element:-

hr { background-image:url(hr1.gif); border: none; }

which works in all browsers. Firefox, Opera and Safari need border: none; however, IE still shows a border even if border: none; is stated. If IE has a color in the basic hr tag style for use in horizontal rules elsewhere on your page without a background-image, it will use the color instead of the background-image in this code (but with no border) so it is better to use a div with a background-image and no text in it to suit all browsers as shown later instead of a background-image for the <hr> tag.

Divs for horizontal rules

You can use a div instead of the <hr> tag as shown below:-

 

The html body code is:- <div class="line">&nbsp;</div>

with stylesheet code:-

.line { background-color: #666666; height: 2px; line-height: 2px; font-size: 2px; border: none; padding: 0; margin: 0; }

You can use a background-image instead of a background-color. The example below uses a 1*1px image:-

 

The html body code is:- <div class="line2">&nbsp;</div>

with stylesheet code:-

.line2 { background-image:url(images/divider1x1.jpg); height: 2px; line-height: 2px; font-size: 2px; border: none; padding: 0; margin: 0; }

It is wise to state the line-height and font-size as some browsers may try to apply the default character height unless you specify these attributes.

See sovavsiti.cz for general information.


© Wickham 2009 revised 2011

top | Sitemap | Home | General Advice