Table is lining rows next to each other

[smproph]

I made a simple form and a table. Well for some reason Firefox is lining two of my rows next to each other but Safari puts the row below each other like it should be and I can't figure out if its a firefox thing or my code. Here it is

<form action="" method="post" name="question"> 
<table>
<tr>
<td>Do you have Children</td>
</tr>
<tr>
<td>Yes
<input name="children" type="radio" value="yes"  onclick = "if(document.getElementById('children').style.display=='none') 
       {
       document.getElementById('children').style.display='inline';
       document.getElementById('children2').style.display='inline';
       } " />

    No
<input name="children" type="radio" value="no"   onclick = "if (document.getElementById('children').style.display='inline') 
       {
       document.getElementById('children').style.display='none';
       document.getElementById('children2').style.display='none';
       } " />
</td>
</tr> 

<tr id="children" style="display:none;">
<td>Name<br/><input type="text" name="name" /></td>
<td>DOB<br/><input type="text" name="dob" /></td>
<td>Age<br/><input type="text" name="age" /></td>
</tr>
<tr id="children2" style="display:none;">
<td>Social<br/><input type="text" name="social" /></td>
<td>DL<br/><input type="text" name="dl" /></td>
</tr>
<tr>
	<td>Do you have pets</td>
</tr>
<tr>
<td>Yes<input name="pets" type="radio" value="yes"  onclick = "if(document.getElementById('pet').style.display=='none') 
       {
       document.getElementById('pet').style.display='inline';
       } " />

No
<input name="pets" type="radio" value="no"   onclick = "if (document.getElementById('pet').style.display='inline') 
       {
       document.getElementById('pet').style.display='none';
       } " />
       </td>
</tr>
<tr id="pet" style="display:none;">
<td>Name<br/><input type="text" name="name" /></td>
<td>Type<br/><input type="text" name="dob" /></td>
<td>Age<br/><input type="text" name="age" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>

 

[JKG]

<form action="" method="post" name="question"> 
<table>
<tr>
<td>Do you have Children</td>
</tr>
<tr>
<td>Yes
<input name="children" type="radio" value="yes"  onclick = "if(document.getElementById('children').style.display=='none') 
       {
       document.getElementById('children').style.display='block';
       document.getElementById('children2').style.display='block';
       } " />

    No
<input name="children" type="radio" value="no"   onclick = "if (document.getElementById('children').style.display='inline') 
       {
       document.getElementById('children').style.display='none';
       document.getElementById('children2').style.display='none';
       } " />
</td>
</tr> 

<tr id="children" style="display:none;">
<td>Name<br/><input type="text" name="name" /></td>
<td>DOB<br/><input type="text" name="dob" /></td>
<td>Age<br/><input type="text" name="age" /></td>
</tr>
<tr id="children2" style="display:none;">
<td>Social<br/><input type="text" name="social" /></td>
<td>DL<br/><input type="text" name="dl" /></td>
</tr>
<tr>
	<td>Do you have pets</td>
</tr>
<tr>
<td>Yes<input name="pets" type="radio" value="yes"  onclick = "if(document.getElementById('pet').style.display=='none') 
       {
       document.getElementById('pet').style.display='inline';
       } " />

No
<input name="pets" type="radio" value="no"   onclick = "if (document.getElementById('pet').style.display='inline') 
       {
       document.getElementById('pet').style.display='none';
       } " />
       </td>
</tr>
<tr id="pet" style="display:none;">
<td>Name<br/><input type="text" name="name" /></td>
<td>Type<br/><input type="text" name="dob" /></td>
<td>Age<br/><input type="text" name="age" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>

[smproph]

I am looking at the code and I do not see what was wrong and what you did to fix it. But it works, could you tell me what you did?

[Coolkat]

seems he changed after Yes in your first JS onClick to block from inline:

 

       document.getElementById('children').style.display='block';
       document.getElementById('children2').style.display='block';

 

Also, you have 

if (document.getElementById('children').style.display='inline

in there twice as if(element = 'inline')  This will always return true and you will want to make it == like in the others. Just a bug you might not have caught yet.

[JKG]

yeah sorry for not explaining, i was in a rush.

 

the javascript changes the styling from display:none to display:inline

 

i simply tweaked it from display:inline to display:block so that it made sure it went underneath.

[smproph]

Haha, Can't believe I didn't see that. Thank you.

[JKG]

no problem, mark the post as solved.