label element renders incorrectly in table layout

take out colspan (and add another cell) everything lines up

[djchrome]

This is a bit of a weird issue that seems to only effect Safari and IE on Mac. I am using a table (eek! yes a table) to layout a form. I have it so that the Label of the form element is above the actual form element (not to the left). Table has three columns because on one row of the table I have City¦States¦Zip so each get their own cell.

The first row asks for FirstName¦LastName and last name has a colspan="2" to account for the extra cell. The next line Address occupies all 3 cells to span the width of the table.

The problem is that for any cell that has a colspan declared in the TD, the labels for the form fields get bumped off the the right side of the form field, instead of on top.

Any ideas?

Code snippet:

<form id="FormName" method="post" action="">
<table cellspacing="0" class="inputTable">

<tr>
<td class="title">
<label for="FirstName">First Name</label>*
<input type="text" name="FirstName" id="FirstName" maxlength="25" size="20" />
</td>
<td colspan="2">
<label for="LastName">Last Name</label>*
<input type="text" name="LastName" id="LastName" maxlength="35" size="20" />
</td>
</tr>

<tr>
<td class="title" colspan="3">
<label for="Address">Address</label>*
<input type="text" name="Address" id="Address" maxlength="100" size="48" />
</td>
</tr>

<tr>
<td class="title">
<label for="City">City</label>*
<input type="text" name="City" id="City" maxlength="25" size="20" />
</td>
<td>
<label for="State">State/Province</label>*
<input type="text" name="State" id="State" maxlength="50" size="15" />
</td>
<td>
<label for="ZipCode">Zip Code</label>*
<input type="text" name="ZipCode" id="ZipCode" maxlength="10" size="10" />
</td>
</tr>

</table>
</form>

And the relevant css

table.inputTable {
display: block;
clear: both;
width: 450px;
margin: 20px 0 0 15px;
font-size: 12px;
background: #E5E5E5;
font: normal .8em Arial, Helvetica, sans-serif;
}

td.title {
width: 40%;
border-left: 12px solid #900;
}

table.inputTable td {padding: 4px 8px;}

table.inputTable input, table.inputTable select {
display: block;
float: left;
clear: none;
}

[edited by: tedster at 7:49 pm (utc) on April 23, 2004]
[edit reason] remove excess code [/edit]

[tedster]

This does not appear to be a CSS issue to me - it's an issue about the way browsers implement the <label> element. I see the same problem on Opera on a PC.

I reduced the code you posted for the sake of focusing in on the issue - and just this much still generates the same problem on Opera. In fact, I'll bet the code could be edited further and you'd still see this effect.

I wish I had a fix, but not even nesting a table inside the <td colspan="2"> seems to do it. I think you should consider the fix you pointed to in your title -- playing with your input field sizes so you don't need any colspan cells.

[djchrome]

Interesting. Thanks for testing and also cleaning up my post =)

I wonder if adding a css style to the label tag would somehow help?

I guess I'll toy with a few ideas and see if I can come with anything.