Paul_o_b - 9:20 am on Aug 27, 2011 (gmt 0)
Thanks for a thoughtful post.:)
However I may be missing the obvious but if you are adding a div around the hr then just set the hr to display:none and style the div instead for perfect results across all browsers.:)
At present you are just removing the hr from the flow causing it to overlap following elements and ending up inside the following element.
<div style="position:relative; margin: 5px auto;" >
<!-- set the border to 1 to see the div boundaries and back to 0 to turn them off -->
<hr style="position:absolute; border-width: 0pt; margin: 5px auto; height: 2px; width: 80%; left:10%; color: khaki; background-color: khaki;">
<div style="border-top:1px solid red">test</div>
The hr ends up inside the following div in the above example. Indeed if you put 3 or 4 of your horizontal rules in a row you will get some weird results.
For your method to work you need to remove the margins from the hr and then apply the same height to the div so that the space is preserved and hide the overflow for older IE.
<div style="border-top:1px solid red;"></div>
<div style="position:relative; margin:5px auto;height:2px;overflow:hidden" >
<hr style="position:absolute; border-width: 0pt; margin: 0px; height: 2px; width: 80%; color: khaki; background-color: khaki;left:10%">
<div style="border-top:1px solid red;">test</div>
All in all its easier just to set the hr to display:none and style the div unless I'm missing something obvious - which wouldn't be the first time.
As far as I see it hrs are really only useful when CSS is turned off and can then section the page nicely. With css on just hide them and use borders on existing elements or use the wrapping div for styling if you think they have structural value.
I've always been adverse to adding extra elements where none are needed and the only argument I see that holds weight for using hrs is for when css is turned off although I know others disagree.