3
Hi, I am having trouble developing a form in a restricted environment. My sample code is found below my message (sorry I don't have a URL). Basically, without a doctype, the form displays properly with 3px padding around each form field, and no overlap. But the doctype changes the box model, I am told, and so the padding is added to the 100% width, leading to overlap and poor presentation. Unfortunately, I'm forced to use the doctype due to other content in the final page.
I was hoping there was a better workaround than assigning some arbitrarily smaller % to the width, like 98%, to accomodate the padding. Also, javascript would be out of the question (subtracting the padding in a dynamic way). You're my last hope!
Any info would be greatly appreciated. Also, this is a similar inquiry to this one: http://www.thescripts.com/forum/thread473949.html for referenc.
Thanks,
CB
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--
Ideally, I would like a 'global' solution here, in CSS
-->
<style>
.TextField {
width: 100%;
}
</style>
<body>
<br />
<table border="1" cellpadding="3" cellspacing="0" width="500" class="application_table">
<tr>
<td colspan="4" style="padding: 0px;" class="application_td">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td width="40%" style="border: none;" class="application_td">Name — Last<br />
<span class="response"><input type="text" name="f_lastName" class="Global TextField QlastName RequiredField"></input></span>
</td>
<td width="35%" style="border: none;" class="application_td">First<br />
<span class="response"><input type="text" name="f_firstName" class="Global TextField QfirstName RequiredField"></input></span>
</td>
<td width="25%" style="border: none;" class="application_td">Middle<br />
<span class="response"><input type="text" name="f_middleName" class="Global TextField QmiddleName"></input></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%" class="application_td">Telephone (Area Code & No.)<br />
<span class="response"><input type="text" name="f_telephone" class="Global TextField Qtelephone RequiredField"></input></span>
</td>
<td colspan="3" width="75%" class="application_td">Name used for previous education and/or employment, if other than current.<br />
<span class="response"><input type="text" name="f_otherName" class="Global TextField QotherName"></input></span>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0px;" class="application_td">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td width="40%" style="border: none;" class="application_td">Permanent Address — Street<br />
<span class="response"><input type="text" name="f_curStreet" class="Global TextField QcurStreet RequiredField"></input></span>
</td>
<td width="35%" style="border: none;" class="application_td">City<br />
<span class="response"><input type="text" name="f_curCity" class="Global TextField QcurCity RequiredField"></input></span>
</td>
<td width="5%" style="border: none;" class="application_select_bottom_padding">State<br />
<span class="response"><select name="f_curState" class="Global DropDown QcurState RequiredField"><option></option></select></span>
</td>
<td width="20%" style="border: none;" class="application_td">Zip Code<br />
<span class="response"><input type="text" name="f_curZip" class="Global TextField QcurZip RequiredField"></input></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%" rowspan="2" class="application_td" style="vertical-align: top;">Are you legally eligible to work in the U.S.?<br />
<span style="white-space: nowrap;"><span class="response"><span class="Global Radio QeligibleUS_yes RequiredField"><input type="radio" id="f_eligibleUS_yes" name="f_eligibleUS" value="f_eligibleUS_yes"></input></span></span> Yes</span>
<span style="white-space: nowrap;"><span class="response"><span class="Global Radio QeligibleUS_no RequiredField"><input type="radio" id="f_eligibleUS_no" name="f_eligibleUS" value="f_eligibleUS_no"></input></span></span> No</span><br />
</td>
<td colspan="3" width="70%" class="application_td" style="border-bottom: none;">Do you have any relatives employed by Company?
<span style="white-space: nowrap;"><span class="response"><span class="Global Radio Qrelatives_yes RequiredField"><input type="radio" id="f_relatives_yes" name="f_relatives" value="f_relatives_yes"></input></span></span> Yes</span>
<span style="white-space: nowrap;"><span class="response"><span class="Global Radio Qrelatives_no RequiredField"><input type="radio" id="f_relatives_no" name="f_relatives" value="f_relatives_no"></input></span></span> No</span><br />
</td>
</tr>
<tr>
<td width="28%" class="application_td" style="border-top: none; border-right: none;">Name<br />
<span class="response"><input type="text" name="f_relatives_name" class="Global TextField Qrelatives_name"></input></span>
</td>
<td width="22%" class="application_td" style="border-top: none; border-left: none; border-right: none;">Location<br />
<span class="response"><input type="text" name="f_relatives_loc" class="Global TextField Qrelatives_loc"></input></span>
</td>
<td width="20%" class="application_td" style="border-top: none; border-left: none;">Relationship<br />
<span class="response"><input type="text" name="f_relatives_relationship" class="Global TextField Qrelatives_relationship"></input></span>
</td>
</tr>
</table>
</body>
</html>
