I have a page, which is an online version of the energy newsletter, and each story is separated by a <hr> symbol. Today I noticed that one of them is rendering at 680px x 2px instead of 680 x 1px.
<hr>
Checking the element, I see that the height comes from this css: "height: 0.1em;" and wondered why the browser seems to think that a different thickness is needed for this, and not for others? (I know this is not important, but it just listens to me, and someone should know!)
This is the page: http://utilitiessavings.co.uk/utilities-insider-issue-10-january-2013/
thanks
Em is not an absolute unit. It is proportional to the size of your font. Most likely, two different <hr> tags inherit different font sizes and therefore calculate 0.1em differently.
Link: http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
As Eipark suggested that you use em, not pixels, to format your HR panels.
Indeed, a simple fix would be
With Style.css, find the line 67 hr {and change the code below, also
From this
height: 0.1em;
For this
height:1px;