I'm having a problem with display of a form in IE9. I don't have it displaying withing <p> tags so that isn't the apparent cause. It is within a fieldset tag, which appears to be a standard thing in the layout:
<fieldset class="formFieldset">
<!--<legend>{global:formtitle}</legend>-->
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
Anyway, what happens is that the first two form fields are Free Text fields. And then everything else are Tables in divs.
In IE9, the first Free Text field displays fine, but the second Free Text field and all other fields which follow are getting pushed over to the right of the end of the first Free Text, as if the float needed clearing, or something. I'm not a CSS expert so I don't know if that's the problem, or if it is some IE9 issue, since it displays fine in Firefox and Safari on a Mac.
I'm pasting the first portion of code so you can see the beginning part of the form, where the problem happens.
<fieldset class="formFieldset">
<!--<legend>{global:formtitle}</legend>-->
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<div class="formBody" style="font-size: 10px;">{instructions:body}</div>
<div class="formBody">{aboutyou:body}
<table>
<tr>
<td align="right" width="250px"><div class="formCaption2">{firstname:caption}<strong class="formRequired">*</strong></div>
</td>
<td><div class="formBody">{firstname:body}<span class="formClr">{firstname:validation}</span></div>
</td>
</tr>
<tr></tr>
<tr>
<td align="right"><div class="formCaption2">{lastname:caption}<strong class="formRequired">*</strong></div>
</td>
<td><div class="formBody">{lastname:body}<span class="formClr">{lastname:validation}</span></div>
</td>
</tr>
<tr></tr>
<tr>
<td align="right"><div class="formCaption2">{phone:caption}<strong class="formRequired">*</strong></div>
</td>
<td> <div class="formBody">{phone:body}<span class="formClr">{phone:validation}</span></div>
</td>
</tr>
<tr></tr>
<tr>
<td align="right"><div class="formCaption2">{email:caption}<strong class="formRequired">*</strong></div>
</td>
<td> <div class="formBody">{email:body}<span class="formClr">{email:validation}</span></div>
</td>
</tr>
<tr></tr>
<tr>
<td align="right"><div class="formCaption2">{emailverify:caption}<strong class="formRequired">*</strong></div>
</td>
<td> <div class="formBody">{emailverify:body}<span class="formClr">{emailverify:validation}</span></div>
</td>
</tr>
</table> ...
Could this div and table code be causing the problem? Or can I solve it with some kind of float clear?
Thanks in advance for any help.
