column expands with "textbox width given in percentage" within table

I am using the following code

--- EDIT @annakata : Adding the complete code

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
  <table id="additionalContactsTable" name="additionalContactsTable"
                                        width="100%"
                                >
                                        <thead>
                                                <tr>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Last</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>First</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Middle</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Email</b> </th>
                                                <tr>
                                        </thead>
                                        <tbody>

                                                <tr>

<td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > </td>

 </BODY>
</HTML>

The problem arises when the user enters a large text, the text box expands and table is distorted. If I put size="30" in there the expansion problem is fixed but on different resolutions, the structure behaves diffferently.

Any fixes or wok around to achieve the desired gracefully ?

Solution

ok, I can clearly see this replicated in IE now.

It appears to be a bug in IE (IE has notorious issues with percentages) dependant on a scenario where:

the input is in a table
AND the input is sized in percentage
AND the input has a default value (i.e. in the markup) which exceeds the width

Therefore a couple of obvious workarounds exist:

put the input in a floating <div> layout instead (I would do this if it's semantically correct)
size width in units like em (preferably) or px (if your design can afford it)
inject the value with client script after the load (this is a poor solution, don't do this)

and one non-obvious workaround which I would recommend if you require both the table and the percentages:

an IE only CSS rule width: expression(this.parentNode.offsetWidth*0.9);

Hope this helps.

(previous answer requesting code deleted)

Edit: code snippet based on your sample, works in IE + FF

<style>
/* table method */
table {width: 100%;}
th {width: 25%; text-align: center; font-weight: 700;}
td {height: 24px; width: 25%;}
td input {overflow: hidden; width: 90%; }
/* IE only correction */
* html td input {width: expression(this.parentNode.offsetWidth*0.9);}

/* float method */
#foo {width: 100%;background:blue;}
#foo div {float:left; width: 25%;}
#foo div  input {width: 90%;}
 </style>

<table>
    <thead>
            <tr>
                    <th>Last</th>
                    <th>First</th>
                    <th>Middle</th>
                    <th>Email</th>
            <tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" /> 
                </td>
            </tr>
    </tbody>
</table>

<div id="foo">
    <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > 
    </div>
</div>