Comments on: <hr> element css – removing the gaps in IE6 and IE7 http://www.simonbattersby.com/blog Fri, 03 Feb 2012 17:49:19 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: twohawks http://www.simonbattersby.com/blog/hr-element-css-removing-the-gaps-in-ie/#comment-5228 twohawks Sat, 27 Aug 2011 02:09:07 +0000 http://www.simonbattersby.com/blog/?page_id=662#comment-5228 I bet this is old, but I stumbled here while trying to harness this particular problem. Thank you for posting it. Here's what I found... conventionally I see folks using font-size and line-height reduciton, along with, perhaps, overflow:hidden, in order to control the margins issue relevant here. To note, IE ascribes a default line-height to an element, so say you try to place an hr in a div... the div will not collapse all the way. To make matters worse, if you use any of the conventional methods for dealing with it, and then presume to add a background color to the hr, the hr will force a line-height... one that you cannot counter with line-height, font-size or height or margins methods, and if you use the overflow:huidden method it will simply disappear! The solution I found that works across all browsers, period, is to use position:absolute ! Here's an example... <pre><div style=”Position:relative; border: 1px solid red; margin: 5px auto;”> <hr style=”position:absolute; border-width: 0pt; margin: 0px auto; height: 2px; width: 80%; left:10%; color: khaki; background-color: khaki;”/> </div></pre> The div border is there so you can see it, set it to 0 to turn it off. If you have a parent or css passing height to the div, reset the height (to something small). Use the div margin attributes to adjust vertical spacing. Use left and width attributes in the HR to center it horizontally. Using the css in this manner also allows consistent hr coloring across all browsers. Things I had to use before, but with less than perfect results were.. in the div: height margin font-size line-height text-align:center align-center I was able to get rid of all that. Works in IE6-8 (did not test 9, but I bet its fine), FF3-4, Opera 9-10, Chrome X-X, Safari 3-5... and I bet others ;^) cheers, twohawks I bet this is old, but I stumbled here while trying to harness this particular problem. Thank you for posting it.
Here’s what I found…
conventionally I see folks using font-size and line-height reduciton, along with, perhaps, overflow:hidden, in order to control the margins issue relevant here. To note, IE ascribes a default line-height to an element, so say you try to place an hr in a div… the div will not collapse all the way.

To make matters worse, if you use any of the conventional methods for dealing with it, and then presume to add a background color to the hr, the hr will force a line-height… one that you cannot counter with line-height, font-size or height or margins methods, and if you use the overflow:huidden method it will simply disappear!

The solution I found that works across all browsers, period, is to use position:absolute ! Here’s an example…

<div style=”Position:relative; border: 1px solid red; margin: 5px auto;”>
<hr style=”position:absolute; border-width: 0pt; margin: 0px auto; height: 2px; width: 80%; left:10%; color: khaki; background-color: khaki;”/>
</div>

The div border is there so you can see it, set it to 0 to turn it off.
If you have a parent or css passing height to the div, reset the height (to something small).
Use the div margin attributes to adjust vertical spacing.
Use left and width attributes in the HR to center it horizontally.
Using the css in this manner also allows consistent hr coloring across all browsers.

Things I had to use before, but with less than perfect results were..
in the div: height margin font-size line-height text-align:center align-center

I was able to get rid of all that.
Works in IE6-8 (did not test 9, but I bet its fine), FF3-4, Opera 9-10, Chrome X-X, Safari 3-5… and I bet others ;^)

cheers, twohawks

]]>