I am experiencing x-browser issues with the styling of a <hr>
within a <span>
. On FF the line is 2px high as expected and as declared in the CSS. However, when I look at it on Safari, Chrome or IE9 the line looks much thicker. Infact, when the <hr>
is inspected with Safari's Firebug equivalent it sees it as 4px.
Is this an issue with the border-radius
CSS attribute which is not apparent on Firefox? I want it to look like how I have built the markup and CSS and how it displays in Firefox, but i'm not sure what is wrong with the markup.
This is how it looks on Firefox:
This is how it looks on Safari (and IE9/Chrome):
My markup:
<span id="course_divider"><hr></span>
My CSS:
#course_divider {
left: 0;
padding-top: 40px;
position: absolute;
top: 27px;
width: 25px;
}
#course_divider hr {
background-color: #000000;
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
height: 2px;
}