IE10/Firefox - onclick/display messes up table formatting

[Guest]

Hello All,

This was brought to my attention that when we have a toggle switch that either displays or hides cells below, it completely ruins the look. Everything has always worked correctly in previous versions but not now.

Here is the code:

    <table class="editTable groupEditTable editTableGroup" cellpadding="0" cellspacing="0">

       <tr>

     <td class="editLabel"><span>*</span>Social Media:</td>

     <td class="editField">

      <input type="radio" name="socialmedia" id="socialmedia"<cfif editstate and item.socialmedia eq 1> checked="checked"</cfif> value="1" onclick="document.getElementById('facebook_name_row').style.display='inline'; document.getElementById('facebook_url_row').style.display='inline'; document.getElementById('facebook_app_id_row').style.display='inline'; document.getElementById('facebook_action_name_row').style.display='inline'; document.getElementById('facebook_action_link_row').style.display='inline';" />

      <label for="socialmedia">Yes</label>

      <input type="radio" name="socialmedia" id="socialmedia"<cfif NOT editstate or item.socialmedia neq 1> checked="checked"</cfif> value="0" onclick="document.getElementById('facebook_name_row').style.display='none'; document.getElementById('facebook_url_row').style.display='none'; document.getElementById('facebook_app_id_row').style.display='none'; document.getElementById('facebook_action_name_row').style.display='none'; document.getElementById('facebook_action_link_row').style.display='none';" />

      <label for="socialmedia">No</label>   

     </td>

    </tr>   

    <tr id="facebook_name_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

     <td class="editLabel"><span>*</span>Facebook Name:</td>

     <td class="editField"><input type="text" name="facebook_name" <cfif editstate>value="#Trim(item.facebook_name)#"</cfif>size="50" /></td>

    </tr>

    <tr id="facebook_url_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

     <td class="editLabel"><span>*</span>Facebook URL:</td>

     <td class="editField"><input type="text" name="facebook_url" <cfif editstate>value="#Trim(item.facebook_url)#"</cfif>size="50" /></td>

    </tr>

    <tr id="facebook_app_id_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

     <td class="editLabel"><span>*</span>Facebook APP ID:</td>

     <td class="editField"><input type="text" name="facebook_app_id" <cfif editstate>value="#Trim(item.facebook_app_id)#"</cfif>size="50" /></td>

    </tr>

    <tr id="facebook_action_name_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

     <td class="editLabel"><span>*</span>Facebook Action Name:</td>

     <td class="editField"><input type="text" name="facebook_action_name" <cfif editstate>value="#Trim(item.facebook_action_name)#"</cfif>size="50" /></td>

    </tr>

    <tr id="facebook_action_link_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

     <td class="editLabel"><span>*</span>Facebook Action Link:</td>

     <td class="editField"><input type="text" name="facebook_action_link" <cfif editstate>value="#Trim(item.facebook_action_link)#"</cfif>size="50" /></td>

    </tr>

    </table>

In ie8, everything look correct:

In ff/ie10, you'll see it almosts looks like everything below is forced into the first <td> cell:

Ant help would be greatly appreciated as I have been banging my head on this for some time.

Thanks!!!!