CSS width: 100% specification on a textbox in IE

The problem

If you create a textbox in Internet Explorer with:

<input type="text" style="width: 100%" value="some long long ... long value" />

Then IE uses either 100% of the available width, or 100% of the width of the actual default text in the textbox, which ever is larger! This is really annoying, since it means if you have a large default value for your textbox (eg several hundred characters), the textbox can be expanded several screens wide to accomodate that text, instead of just filling the area available

Here's an example where it's generally not a problem, when the default values are small.

Table= width: 100%; Textbox= width: 98%

Here it is a problem when you have long default values

Table= width: 100%; Textbox= width: 98%;

Solution 1: Use javascript to set the value after the page has loaded

If the default value is empty, but then you change the text using javascript after the page has finished loading, then it works fine

Table= width: 100%; Textbox= width: 98%; Use 'rvalue' and JS to change onload

Solution 2: Use "table-layout: fixed"

Use "table-layout: fixed", though this can change the rendering of more complex tables significantly, especially if you're using tables to avoid text overflowing elsewhere

Table= width: 100%; table-layout: fixed; Textbox= FullWidth; FullWidth= width: 98%