IE box model + float = duplicated text
If you are floating elements within a box (in this case
<label>s within a
<fieldset>), Win/IE6 appears to have a box model issue (even when rendering in “standards mode”) and will duplicate a portion of your text onto a new line:
In this example, the width of the conatining
<fieldset> is set to 410px. Padding is set to 0px, so the box has an inner width of 410px. The
<label>s are each set to 200px wide, with a right-hand margin of 5px. Floating two
<label>s next to one another would yield a width of 410px (200 + 5 + 200 + 5 = 410), thereby snuggly fitting within the container box.
Note: if the elements you are floating do not reach the other side of the container, there is no problem (see the first
<fieldset> in the live demo or above).
Dropping the width or margin of the
<label>s or increasing the width of the
<fieldset> seems to get rid of the issue. Oddly enough, in the above example, the issue disappears when the
<label>s reach 196px wide, meaning that that Win/IE6 will keep the display issue until the floated elements are at least 8px (410 - 196 - 5 - 196 - 5 = 8) away from the right-hand side of the container.