Question

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;
}

Answer 1

Remove the height from

#course_divider hr {
    background-color: #000000;
    border: 1px solid black;
    border-radius: 7px 7px 7px 7px;
    height: 2px;
}

you will get your solution 🙂

demo http://jsfiddle.net/kMhEv/2/