<hr> element css – removing the gaps in IE6 and IE7
Applying css styling to the horizontal rule <hr> element is a little problematic, thanks in most part to non-standard approach of IE6 and IE7 or less. Let’s start off with colour. IE7 and under use the color selector to set the colour of the <hr>. Firefox, Opera, Chrome, Safari and IE8 all use background-color. So with css as follows:
hr{height:10px;color:red;background-color:blue}
Firefox and Opera give me a blue <hr> with a faintly discernible red border, Chrome, Safari and IE8 give me a blue <hr> with a grey border, and IE6/7 give me a red <hr> with no border. So I need to set both color and background-color and remove the border to get a consistent effect.
So far so good, but the next problem is the margin. IE applies a default 8px margin top and bottom, which is added to any margin applied via css. So, with css as follows:
hr{height:10px;color:blue;background-color:blue;border:none;margin:10px 0}
Firefox, Opera, Chrome, Safari and IE8 are consistent but IE6/7 have a much bigger margin. My only solution is to use some conditional css to target IE6/7
<!--[if lte IE 7]>
<style type="text/css">
hr{margin:2px 0}
</style>
<![endif]-->
So to achieve a 10px margin in IE I’m compensating for the 8px applied by only applying a 2px margin. Job done.
Here’s a test page if you want to have a look for yourself.
There is another solution to all this of course, which is to dispense with the <hr> element altogether and use border instead…
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…
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