1

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:

The HR on Firefox

This is how it looks on Safari (and IE9/Chrome):

The HR on Safari

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;
}
1
  • hr {border:0;border-top:1px solid #555;margin:0;height:1px;}
    – Jawad
    Sep 10, 2012 at 11:17

2 Answers 2

5

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/

1

It's simply an issue with your css in relation to the box model.

You have a height of 2px plus a border width of 1px.

So the box model is created with 1px at top/right/bottom/left.

So you 2px height plus 1px top+bottom for the border width = 4px height.

Remove the 2px height and it should be all good.

Your background color isn't required either.

#course_divider hr {
 border: 1px solid black;
 border-radius: 7px 7px 7px 7px;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.