Problems with long multi-form in IE8

This is the deal, the "ready styles" are simply pre-built helper styles but are still just CSS rules and aren't bulletproof by any means. They use floats, and clears to achieve the column layouts. How you arrange the fields and even the types/sizes of the fields make a difference in the final results. Inheritance from your theme CSS may also cause problems.

You're mixing different types of fields - some with sub-labels, others with descriptions, etc with others that don't have any sub-text or sub-labels. This means the adjacent fields are different heights and when the elements on the next line float, they "hang" on the different sized elements above. example: http://grab.by/7BSy

What you need to do to remedy this, is define equal heights for elements in each row if you don't want this behavior. Since you're only seeing this in IE, you can try just adding the height rules, etc. in an IE conditional block.

<!--[if IE]>

<style type="text/css">
body .gform_wrapper .top_label li.gfield.gf_left_half,
body .gform_wrapper .top_label li.gfield.gf_right_half {margin:0 0 8px 0!important; height:80px;}

body .gform_wrapper .top_label li.gfield.gf_left_third,
body .gform_wrapper .top_label li.gfield.gf_middle_third,
body .gform_wrapper .top_label li.gfield.gf_right_third {height:80px;}

body .gform_wrapper ul.gform_fields {overflow:inherit}

</style>

<![endif]-->

Honestly, even with the heights defined, your form layout looks pretty random with the fields in different column formats everywhere. It might be better to stick with just a 2 column layout all the way around. I understand you're trying to conserve space, but as a user, I would find this more confusing than helpful.

I'm going to experiment with the CSS - a couple of other ideas to see if I can forego some of this issue in the final 1.5 release.

Okay, thanks for the report, we'll look into into those issues.