CSS 'clear:both;" not working as expected for IE7 browsers. No problems in IE8/IE9, Firefox, Chrome, etc

Question

I've received several complaints from visitors to one of my websites. Individuals contacting us regarding these issues are using IE7, running on Windows XP. I can replicate the issue either by running IE7 itself, or by displaying the site in IE8/IE9 in compatibility mode, with IE7 document mode selected.

This page contains a registration form with fieldwraps that float:left, and occasionally are assigned a "clear:both" to start a new line of fields. Again, the desired output can be viewed in any modern, standards compliant browser, or even in IE8/IE9.

If you need any clarification of the problem, I'm happy to provide it, and greatly appreciate any assistance you can offer!

Answer 1

You are mixing floats and clears in a bad way. There are the DIVs with the labels and the fields and you just need to float these divs, but you are also floating the fields and labels inside the DIVs without clearing them. This is a Problem in IE7.

Answer 2

The Clear: both needs to be on a separate div after the two elements you want to clear. Failing that you can wrap the fields you want to clear in a clear fix using the :after pseudo element.

See this thread: What methods of 'clearfix' can I use?

Also sometimes with IE7 if you don't force haslayout it can mess around with your floats. The easiest way to do this is to add zoom:1; to your ie7 stylesheet.