Having strange issues with inline inputs in IE

Question

I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?

http://65.61.167.68/form/

Answer 1

I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.

#paydayForm .row .column
{
    float:left;
    margin-bottom:5px;
    margin-right:18px;
    margin-top:5px;
    width:170px;
}

Answer 2

No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/

<table>
  <tr>
    <td colspan="2">amount requested</td>
    <td rowspan="2">info<br />text<br />here</td>
  </tr>
  <tr>
    <td>first name</td>
    <td>last name</td>
  </tr>
  <tr>
    <td>zip code</td>
    <td>city</td>
    <td>state</td>
  </tr>
  <tr>
    <td colspan="2">date of birth</td>
    <td>social security no</td>
  </tr>
</table>

Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)