Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

unhiding causes misaligned columns

Posted on 2012-03-13
3
Medium Priority
?
395 Views
Last Modified: 2012-03-14
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

0
Comment
Question by:ecpeel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 13

Accepted Solution

by:
haloexpertsexchange earned 1000 total points
ID: 37717434
its the display block that is doing it.
try this instead.
function showConfirm()
      {
            document.getElementById('rowConfirmEmaila').style.visibility = "visible";
                  
            document.getElementById('rowConfirmEmaila').style.display = "";
            
      }
0
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 1000 total points
ID: 37717622
Loose the inline style visibility: hidden and keep display: none.
Set the style.display to "" (empty string) in showConfirm and it should be OK.
Don't use visibility.
0
 

Author Closing Comment

by:ecpeel
ID: 37719811
Thanks!
and thanks for the extra tip AlbertVanHalen
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question