Internet Explorer: Bad visualization of CSS Table (table-row, table-cell)

Question

I've made a CSS table structure using display table, table-row and table cell properties.

Each p has table-row property and they jump line OK. But when I put 2 o more elements (input or select) in the same <p> I would like that this elements were inline but in IE (last version) jump of line in spite of to belong to he same <p>

Is there any solution to fix this? The perfect visualization is like Firefox, all elements in line.

<p><label>Name (first, second): </label><input type="text" /><input type="text" /></p>

Example: http://jsfiddle.net/HY62t/

Answer 1

Add the following Class in your CSS.

 fieldset input{display:inline-block}

It will resolve your issue and display properly in all the browsers.

Demo

Answer 2

Add vertical-align: top (and padding-top ) or middle to labels .

In case of two inputs on separate lines zou can use for example fieldset input {float: left;} .