I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it.
If you display the below html in IE8 you will see the text from the select (combo box), is displayed twice. One outside of the combo box. This is messing up the flow of my document (not to mention looking weird).
<html><body>
<div style="width: 800px;">
<div style="float: right" >
</div>
<div style="display: none">
ijklmno
</div>
<div style="float:left">
<select>
<option>abcdef</option>
</select>
<div style="float: right">
</div>
</div>
</div>
</body></html>
This is definitely a bug, since you are pretty explicit in the layout style rules. But it’s also a really weird arrangement to begin with. If you unhide the hidden div, add text OR hide the div below the select, the problem goes away. My best guess is that since you have overlapping block level elements with one hidden and one empty, IE is ignoring the float and trying to fit them on top of each other, which is forcing the option down, but since the select stays in place, its showing the option within the select as well.
Very strange and a very cool catch. Your options as I see them is to either add some content to the the last div (non-breaking space, probably) or hide the div (display: none), or both.
In Firefox, that last div is also not floating right and is overlapping with the select (you can tell by outlining block-level elements with the Developer Toolbar) which makes me think that Firefox is just better about handling overlapping block level elements.
If you set the last div to have a border, you’ll see that it’s not floating to the right of the main div.