asked on

unhiding causes misaligned columns

Hi,
The function is triggered when something changes in the email input box.
Why does the new row throw off the the form alignment?

<table width="100%" border="0">
		<tr><td colspan="2">&nbsp;</td></tr>
		<tr>
			<td>&nbsp;</td>
			<td><span style="color:##A00;">*</span> Denotes a required field</td>
		</tr>
		<tr>
			<td align="right"><b>Business Name:</b>&nbsp;</td><td width="77%"></td>
		</tr>
		<tr>
			<td align="right"><b>Account Number:</b>&nbsp;</td><td></td>
		</tr>
		<tr>
			<td align="right"><b><span style="color:##A00;">*</span>Business Phone:</b>&nbsp;</td>
			<td>
				<input type="text" name="txtBusPhone" id="txtBusPhone" value="" onkeyup="disableTabs();" onchange="disableTabs()">
			</td>
		</tr>
		<tr>
			<td align="right"><b>Fax:</b>&nbsp;</td>
			<td>
				<input type="text" name="txtFax" id="txtFax" value="" onkeyup="disableTabs();" onchange="disableTabs();">
			</td>
		</tr>
		<tr>
			<td align="right" valign="middle"><b><span style="color:##A00;">*</span>E-mail:</b>&nbsp;</td>
			<td>
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td valign="top">
							<input type="text" name="txtEmail" id="txtEmail" value="" size="40" validate="regular_expression" pattern="^([_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.(([A-Za-z]{2,3})|(aero|coop|info|museum|name)))?$" message="Email is not valid." onFocus="setWhite(this.id)" onkeyup="" onchange="showConfirm();">			
						</td>
						<td>&nbsp;</td>
						<td valign="top" width="48%" style="font-size:9px;font-weight:bold">Your email is very important to your<br>order. Please confirm its accuracy.</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr id="rowConfirmEmaila" style="visibility:hidden;display:none;">
			<td align="right" valign="middle"><b><span style="color:##A00;">*</span>Confirm E-mail:</b>&nbsp;</td>
			<td>
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td valign="top">
							<input type="text" name="txtEmail" id="txtEmail" value="" size="40" validate="regular_expression" pattern="^([_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.(([A-Za-z]{2,3})|(aero|coop|info|museum|name)))?$" message="Email is not valid." onFocus="setWhite(this.id)" onkeyup="disableTabs();" onchange="disableTabs()">			
						</td>
						<td>&nbsp;</td>
						<td valign="top" width="48%" style="font-size:9px;font-weight:bold"></td>
					</tr>
				</table>
			</td>
		</tr>		
		
		<tr>
			<td align="right"><b>Customer Notes:</b>&nbsp;</td>
			<td>
				<textarea id="txtNotes" name="txtNotes" style="width:300px;" onkeyup="disableTabs();" onchange="disableTabs();"></textarea>
			</td>
		</tr>
	</table>
    
    <script type="text/javascript">

	
	function showConfirm()
	{
		document.getElementById('rowConfirmEmaila').style.visibility = "visible";
			
		document.getElementById('rowConfirmEmaila').style.display = "block";
		
	}
	
</script>

Open in new window

ASKER CERTIFIED SOLUTION