Media Matt

I prefer to use a div with a colored background in place of a horizontal rule tag to create a separator between elements. This eliminates dealing with difficult inconsistencies that the <hr> tag creates across different browsers. When using this div to create a bar 16px or less in height, IE6 will not collapse the div past 16px.

If you view this page in IE6, you will this bug here:

In order to fix this bug, you must use height: 1px; font-size: 1px; and overflow: hidden; all in combination to create a 1px high div that displays the same in IE6, IE7, and FireFox.

If you view this page in IE6, you will see this bug is fixed:

If you are viewing this in FireFox or IE7 then both samples will look the same.

Here is the full HTML and CSS code for this example:

.horizontalRule {
  margin: 15px 0 5px 0;
  background-color: #F7F4EF;
  font-size: 1px;
  height: 1px;
  overflow: hidden;
}

<div class='box1'> Lorem ipsum dolor sit amet, consectetuer
 adipiscing elit. In aliquam ultrices ligula. Quisque
 imperdiet eleifend nulla. Curabitur quis mauris vitae sem
 volutpat viverra.
<div class="horizontalRule"></div>
 Phasellus turpis urna, blandit ac, semper et, scelerisque
 non, libero. Integer.</div>