2 replies [Last post]
djchrome
Offline
newbie
Last seen: 16 years 49 weeks ago
Timezone: GMT-8
Joined: 2004-02-12
Posts: 6
Points: 0

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?

Site here: http://www.sentinare.com/signup.php?q=home

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;
}

label {cursor: pointer;}

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

colspan breaks label tag in form using Safari or IE on Mac?

Try adding the CSS rule:

label { display: block; }

This will knock the textboxes below the labels each time. However, if you do this, you'll have to move the asterisks span and HTML inside the label (otherwise these will get pushed onto the next line).

If you don't want each and every label to be a block element, simply make the css rule as a class:

label.lblBlock { display: block; }

... and apply it to the required labels.

Smile

The next sentence is true. The previous sentence is false. Discuss...

djchrome
Offline
newbie
Last seen: 16 years 49 weeks ago
Timezone: GMT-8
Joined: 2004-02-12
Posts: 6
Points: 0

colspan breaks label tag in form using Safari or IE on Mac?

Beautiful! Now why didn't I think of that!?!

Thanks very much Laughing out loud