Creeping Text in Microsoft Internet Explorer (Bug)

This little bug creeped up on me while I was creating my project worksheet for this site. I had run into it before but could not, for the life of me, remember how I solved it. This bug seemed to be very elusive and since I only use IE to check compatibility when designing a page, usually with a quick scan of the page as I go along to make sure nothing has gone awry so I almost missed it.

The Problem

IE is notorious for having problems with floats and as it turns out, that is exactly what was causing the problem. I was floating my labels against their associated checkbox and IE mysteriously copied the last few characters on a brand new line on the last item in the fieldset. It was actually duplicating text

Another easy to miss example:

The Fix

I tried a number of things in a hit or miss fashion as I'm not sure why IE does this. I stumbled across a solution that seems to work and has had no side effects thus far. It seems that if you add a negative margin to the offending element, 10px in this example, it resolves the problem. To keep the ugly bug fix out of my regular stylesheet as to not offend more compliant browsers, I added it to a stylesheet that only IE would see by using a conditional statement.

<!--[if IE]><style type="text/css">@import"css/ie.css";</style><![endif]-->

... and in the stylesheet

label {margin-right:-10px;}