The other day my fellow co-worker, Cameron, and I were discussing what the best way to style the hr tag?
I usually try to use a div if I just need a line for presentation. But what if I need to style an hr that is used on an existing site.
It is certainly easier to apply a simple style to the hr tag in the style sheet to make the change. However, each browser, as you can guess has a different way to render them. At first I thought it was Mozilla and the rest of its crew that was rendering the styles
incorrectly. However, surprise surprise, it turned out to be IE that did it incorrectly in the end.
Here are my solutions and examples on how to get the hr tag to render the same in the popular browsers.
By default the hr tag is center-aligned. To align it left follow the example.
Align Left
hr {width: 50%;
text-align: left;/*this will align it for IE*/
margin: 0 auto 0 0; /*this will align it left for Mozilla*/
}
Align Right
hr {width: 50%;
text-align: right;/*this will align it for IE*/
margin: 0 0 0 auto; /*this will align it right for Mozilla*/
}
Borders
Now lets add a 1px border on the top of the hr. For IE you need to give the hr a height of whatever the total height of the borders will be.
So if you give thehra border of 1px on all sides the height will need to equal 2px.
hr {border: none 0;
border-top: 1px dashed #000;/*the border*/
width: 50%;
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
}
Backgrounds
You can add background colors or images, but they don't work in IE. So if you must use a background color or image I would use a div. See the following.
hr.bg {
background: #fff url(../i/borderLine.gif) no-repeat center bottom;
margin: 8px auto;
height: 1px;
border: 0 none;
}
This horizontal rule above doesn't render correctly in IE, so I used a div below to achieve the effect.
.line {
background: #fff url(../i/borderLine.gif) no-repeat center bottom;
margin: 8px auto;
height: 1px;
}
Other <hr/> Examples
View source to see the styles used for each of the following.
A Reader's Toolbox No one can deny the importance of design templates in the field of search marketing. Those who are interested in offering the online certifications like 350-018 or SY0-101; are well aware of the value of spyware software. voip phone also facilitates you in case of contacting with your customers.