By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,676 Members | 1,636 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,676 IT Pros & Developers. It's quick & easy.

Doctype affecting input field widths; fields extending past table boundaries

P: 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 &mdash; 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 &amp; 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 &mdash; 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>&nbsp;
<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? &nbsp;
<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>&nbsp;
<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>
Jan 24 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Try adding this to your css:

td{padding-right:7px}

You can use percent but that might be too big a jump between numbers.

Your style tag is incorrect. I should be <style type="text/css">
Jan 24 '07 #2

P: 3
Try adding this to your css:

td{padding-right:7px}

You can use percent but that might be too big a jump between numbers.

Thanks a lot for the tip, but unfortunately this only halfway works. While many of the fields themselves are now within the table boundaries, any styles you may apply to the td inside are pushed to the right (in my case I lose 1/4 of my border because "stuff" is still outside of the td, even though it's just padding). In the box model, I think padding is added regardless of boundaries so what's inside is 100% plus padding... which isnt very intuitive imho but that's the way it goes, so it is wider than the surrounding element. I could do another workaround for that border issue but unfortunately it will only work for the far right edge of a multi-celled table, while the cells inside the table will still overlap and look bad.

Your style tag is incorrect. I should be <style type="text/css">
Sorry I put that together kind of sloppily, but the styles still apply.
Jan 24 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
I've been playing with this and those nested tables are just gonna kill you. I would just use divs. You'll have so much more sensible control.
Jan 24 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.