style.display = inline - different in FF/IE

Placebo

Incompatibilities are driving me insane

Basically have a combo box, on selecting a value it reveals x amount of feilds below.
Table-row-group is incompatible with IE, where as 'inline' works with IE but shows up weird for FF, 'block' shows weird for both.

link

Change combo box at the end , 'No of children..'

<script type="text/javascript">
function display(id1){
  document.getElementById('kid0').style.display = "inline";
document.getElementById(id1).style.display = "inline";
}
</script>

<table>
<tr><td>

 <select  class="inputtext" name="kids" onChange="display(this.value);">
<option value="">0</option>
<option value="child1">1</option>
<option value="child2">2</option>
<option value="child3">3</option>
<option value="child4">4</option>
</select></td></tr>



<tbody id="kid0" style="display:none;">
<tr><td class="lightForm"><font face="arial" size="2">Ages of Children:</font></td>
<td class="lightForm"></td></tr>
</tbody>

<tbody id="child1" style="display:none;">
<tr><td class="lightForm" >

<font face="arial" size="2">Child 1:</font></td>
<td class="lightForm"><input  class="inputtext" style="width:13em" type="text" name="child1" value="<?= $child1; ?>">

</td></tr>
</tbody>

</table>
...etc

Placebo

FYI

style.visibility='hidden';

or visible

works for both.

actually that just left a bank space, best use

=""; to SHOW and none to hide.