Doctype affecting input field widths; fields extending past table boundaries

3 New Member

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.ht ml for referenc.

Thanks,
CB

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html>
<head>


<style>

.TextField {
width: 100%;
}

</style>

<body>

<br />
<table border="1" cellpadding="3" cellspacing="0" width="500" class="applicat ion_table">
<tr>
<td colspan="4" style="padding: 0px;" class="applicat ion_td">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td width="40%" style="border: none;" class="applicat ion_td">Name — Last<br />
<span class="response "><input type="text" name="f_lastNam e" class="Global TextField QlastName RequiredField"> </input></span>
</td>
<td width="35%" style="border: none;" class="applicat ion_td">First<b r />
<span class="response "><input type="text" name="f_firstNa me" class="Global TextField QfirstName RequiredField"> </input></span>
</td>
<td width="25%" style="border: none;" class="applicat ion_td">Middle< br />
<span class="response "><input type="text" name="f_middleN ame" class="Global TextField QmiddleName"></input></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%" class="applicat ion_td">Telepho ne (Area Code & No.)<br />
<span class="response "><input type="text" name="f_telepho ne" class="Global TextField Qtelephone RequiredField"> </input></span>
</td>
<td colspan="3" width="75%" class="applicat ion_td">Name used for previous education and/or employment, if other than current.<br />
<span class="response "><input type="text" name="f_otherNa me" class="Global TextField QotherName"></input></span>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0px;" class="applicat ion_td">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td width="40%" style="border: none;" class="applicat ion_td">Permane nt Address — Street<br />
<span class="response "><input type="text" name="f_curStre et" class="Global TextField QcurStreet RequiredField"> </input></span>
</td>
<td width="35%" style="border: none;" class="applicat ion_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="applicat ion_select_bott om_padding">Sta te<br />
<span class="response "><select name="f_curStat e" class="Global DropDown QcurState RequiredField"> <option></option></select></span>
</td>
<td width="20%" style="border: none;" class="applicat ion_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="applicat ion_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_eligibleU S_yes" name="f_eligibl eUS" value="f_eligib leUS_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_eligibleU S_no" name="f_eligibl eUS" value="f_eligib leUS_no"></input></span></span> No</span><br />
</td>
<td colspan="3" width="70%" class="applicat ion_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_relativ es" value="f_relati ves_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_relativ es" value="f_relati ves_no"></input></span></span> No</span><br />
</td>
</tr>
<tr>
<td width="28%" class="applicat ion_td" style="border-top: none; border-right: none;">Name<br />
<span class="response "><input type="text" name="f_relativ es_name" class="Global TextField Qrelatives_name "></input></span>
</td>
<td width="22%" class="applicat ion_td" style="border-top: none; border-left: none; border-right: none;">Location <br />
<span class="response "><input type="text" name="f_relativ es_loc" class="Global TextField Qrelatives_loc" ></input></span>
</td>
<td width="20%" class="applicat ion_td" style="border-top: none; border-left: none;">Relation ship<br />
<span class="response "><input type="text" name="f_relativ es_relationship " class="Global TextField Qrelatives_rela tionship"></input></span>
</td>
</tr>
</table>

</body>
</html>

Jan 24 '07 #1

Subscribe Reply

4824

drhowarddrfine

7,435

Recognized Expert Expert

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

cbradio

New Member

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

7,435

Recognized Expert Expert

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

Similar topics

4992

Text input field plus image should have total width of N em

by: Kai Grossjohann | last post by:

I would like to put a text input field (in the sense of <input type="text">) and an image next to each other, where I know the size in pixels of the image, and I know the total width in em. I haven't found a way to do this. I tried <span style="width:20em"> <input type="text"> <img width="25px" src="...">

HTML / CSS

13124

Removing spaces/padding around <input> text fields?

by: Jonathan Daggar | last post by:

Hello, I'm trying to put together a form with a very tight table formatting. However, every time I put an text-type input field in, the browser pads the area to the right of it with space. I've tried to eliminate it several ways, but it won't go away. It looks like it's forcing at least one space (line break?) in after each field, and then there's some mystery padding on the right that also refuses to go away. I've put up a demo of...

HTML / CSS

8247

Cursor missing input box

by: Gary Holt | last post by:

We have a problem demonstrated by the following HTML document. To see the problem type HV in the first field then use the mouse cursor to click into the Staff code input box. You will find that the cursor has ended up in the prompt field rather than the input. I think it is due the table dynamically resizing when the description is added to the second cell, so where your cursor clicked no longer contains the location of the input box. ...

HTML / CSS

3512

Widths and padding / margin..

by: Andrew Thompson | last post by:

I am developing a Periodic Table of the Elements as<DIV>s ..(chuckle - just kidding!) a <TABLE> at http://www.physci.org/test/chem/, or rather, the table itself is.. http://www.physci.org/test/chem/ptoe.html It contains valid HTML and CSS (checked 'moments' ago). Am testing in IE 6 on XP. My questions..

HTML / CSS

2364

Auto Populating field

by: Geoff Portbury | last post by:

I'm a swimming club coach. I have a data base for recording times at various meets. I have a FORM for entering times called SWIM TIMES. When I enter the swimmers name ID, eg FOR01 for Doug Ford I want "Doug" to populate the FIRST Name field and "Ford" to populate the Last Name field. At present I have to manually enter them. I have a table called Name ID in which I have stored the swimmers ID numbers , first and last names in the...

Microsoft Access / VBA

1243

Fixed Field Width Issue

by: Chris Crowe | last post by:

Hi, I am using VB.net to export a table from a SQLServer2000 Database server. The table is basically a collection of fixed width char fields. Here's the issue: How do I get the fields, through an SqlClient.SqlDataReader, to save to a file with exactly the same field widths as in the table. The main problem I am having is with the NULL fields. I am having no luck at all in finding out any width informatiion through the SqlDataReader....

Visual Basic .NET

6082

DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?

by: Shadow Lynx | last post by:

Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Strict kills my widths!</title> </head> <body> <table style="width:400px; table-layout:fixed;">

HTML / CSS

2628

Calculate length of input based on parent <TD>

by: Michael | last post by:

Hi. I need dinamically calculate input text field based on parent static TD before showing content of input. Please, advice. Michael

ASP / Active Server Pages

13972

Auto populate a field based on selection from Combo box

by: whamo | last post by:

I have the need to populate a field based on the selection in a combo box. Starting out simple. (2) tables tbl_OSE_Info and tbl_Input; tbl_OSE_Info has three fields: Key, OSE_Name and OSE_Wt tbl_Input has three fields: OSE_Job, OSE_Name, OSE_Wt I have populated tbl_OSE_Info table. I need to create a form that will store the data in tbl_Input I have racked my brain so much trying to figure out how to auto populate a field based on a...

Microsoft Access / VBA

9480

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10327

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10151

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9950

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8973

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6740

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5511

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4053

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3647

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP