A New IE 6 Bug?

I was finishing up a project yesterday and all that was left was adding a drop-down box to a form and double-checking the submittal process. Suddenly I was face to face with an unanticipated and very surprising bug on IE 6 — the last word in the last option's text in the drop-down was not only where it was supposed to be, it was also sitting on the page below and to the left of the box.

Thinking maybe I had forgotten to end a quote or tag, I checked the HTML and... found nothing wrong. I added some line-breaks just in case, but it didn't make a difference. Safari and Firefox displayed everything correctly, so I started suspecting it was a CSS issue.

After trying many different tactics that either made some sort of logical sense or I'd seen work on IE before (it doesn't use much logic itself, so you have to fight fire with fire), I started throwing everything at it. And lo and behold, something worked! I've been using definition lists for my forms for awhile now (somewhat semantically meaningful and fairly easy to format), and on this particular page I was floating both dt and dd. Directly following the list was a paragraph tag. Turns out it was a result of this - the floating wasn't resolved to IE's satisfaction apparently.

In case you ever run into this issue, here's what fixed it: either applying position: relative to the select box or clear: left to the tailing paragraph. I needed to clear the paragraph anyway, so that's when I ended up doing. Strange though! Maybe not a new bug, but I couldn't find any reference to it with a cursory search (how does one search for that kind of thing? "um, text... escaping... drop-down... select... css... jumping ship... duplicate... um... twisty-goo?").