horizontal ruler as separator

two images separated by an hr...

chaotic test page
rev: 14.sep.2008

When one wants something that looks and feels like a horizontal ruler, it makes sense to use a horizontal ruler. However, if one wants tight control across browser-land, one will soon find out that old IE is doing its own things.

problem: ordinary styled hr creates gaps in IE/win.

Fix: overstyling (hacking) IE/win.

hr {
/* regular styling */
width: 300px; 
height: 0; 
border: none; 
border-bottom: solid 1px #000;
margin: 0 auto;

* html hr {
/* overstyling IE6 */
display: block;
margin: -7px 0;

*:first-child+html/*/* /**/ hr {
/* overstyling IE7 */
display: block;
margin: -7px 0;


In IE7 (and older) the vertical space above and below an <hr /> is a stable 7px in addition to any declared margin, so 7px is the value we have to counteract.

For margins to work on the gap both above and below an <hr /> in IE7 (and older), we must add the otherwise redundant display: block;.
Talk about ridiculous implementation, but at least it is controllable.

IE7 (and older) versions may also introduce stacking bugs and other nonsense that may ruin the appearance, unless 'hasLayout' is triggered on the outer containers – the darker gray areas containing images and <hr /> above.

tested browsers:

win2K/XP: (7.54, 8.50) 9.50, 9.52, 9.60 beta
MacOSX: 9.51
win2K/XP: 3.0.1
MacOSX: 3.0.1
winXP: 3.1.2
MacOSX: 3.1.2
win2K: 6.0 (quirks/strict mode)
winXP: 7.0 (quirks/strict mode)