Question

I’ve got a form inside a table that has some Javascript validation. The table tag is

<table style="padding-left:70px" align="left" cellpadding="10">

and a given row looks like this:

<tr id="email_row">
 <td align="right" valign="top">
  <label for="email">Email: *</label>
 </td>
 <td class="field_cell" valign="top">
  <input type="text" name="email" maxlength="80" size="30"><span class="error_field"></span>
 </td>
</tr>

If the user hits submit without this or other fields filled (or filled correctly), the span gets filled with an error message like “Invalid” or “Required.” Unfortunately, doing this shifts the whole tbody over do the left (even though it is aligned left). Any suggestions?

FYI, I can only reproduce this problem in Chrome. Firefox and IE are working just fine.

Answer 1

Fixed!
The problem was that I had a row of text in the table with colspan=2 that made the width of the table greater than the width of any of the other rows.
Adding text to the <span> elements increased the width of the second column, which in turn caused the first column to become smaller (since its cells were aligned to the right).