textboxes alignment messing up when required validators fire?

Question

I have table with couple of textboxes in it. In those 2 fields I have required fields. When validators fire alignment is changing. Before the validators fire, textboxes aligntment is good.

Pic1 for after validator fires.

Pic2 for before validator fires.

Here is the HTML.

<table class="Borderblue" id="Table26" cellspacing="3" align="center" style="width: 100%;">
 <tr>
    <td bgcolor="White" style="width:20%" >
            First Name  <br/> 
            (on website)                                 
    </td>
     <td bgcolor="White" style="width:20%" >
           Middle Intial <br/> 
                 (on website) 
      </td>

      <td bgcolor="White" style="width:20%" >
              Last Name <br/> 
              (on website) 
      </td>
       <td bgcolor="White" style="width:20%" >
              Nick Name <br/> 
              (Goes By Name) 
       </td>  
    </tr>                               
     <tr>
         <td bgcolor="White" style="width:20%" >
             <asp:TextBox ID="txt6_2" runat="server" CssClass="TextBox SmallText" ></asp:TextBox>
              <asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator8" ValidationGroup="ValidateInsert" Display="Dynamic" controltovalidate="txt6_2" errormessage="Please enter first name!" />
         </td>
         <td bgcolor="White" style="width:20%">
             <asp:TextBox ID="txt7_2" runat="server" CssClass="TextBox SmallText" MaxLength="2" Width="20px" style="vertical-align:top"  ></asp:TextBox>
        </td>                           
        <td bgcolor="White" style="width:20%">
               <asp:TextBox ID="txt8_2" runat="server" CssClass="TextBox SmallText"></asp:TextBox>
              <asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator9" ValidationGroup="ValidateInsert" Display="Dynamic" controltovalidate="txt8_2" errormessage="Please enter last name!" />
            </td>                           
            <td bgcolor="White" style="width:20%" >
             <asp:TextBox ID="txt9_2" runat="server" CssClass="TextBox SmallText" width="120px"></asp:TextBox>                                                                            </td>            
      </tr>
</table>

CSS:

.SmallText
{
     font-family: Tahoma, Arial, Helvetica;
     text-align:justify;    
    font-size: 8.5pt;
 }
    .TextBox
    {
           Width: 100px;
           Height:12px;
           background-color:#F0F0F0;
           border: 1px solid #000000;
   }

Answer 1

You'll probably need to move the validators to their own cells so the text box cells aren't expanded. Or valign="top" on your cells might work.