input type=text problem in IE 2

[bitwise]

I have a simple problem I hope someone has a CSS solution for. I have a table with a width of 100% - no problems there. Inside that table I have a row with a text box:

<tr><td>
<input type='text' class='textSubject' name='subject' value='My Text'>
</td></tr>

FYI, the CSS class "textSubject" is defined as follow:

.textSubject { 
width:100%;
}

Now, there is no problem with this as it stands. The text box fills out to the width of the table it is contained in. The PROBLEM is if the VALUE of the input type text above is longer than the width of the table it is in.

For example, as you can see above the VALUE of the input type text is set to 'My Text' and there is no problem; however, if I were to sent the value to:

[tt]'My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text My My Text My Text My Text My Text My Text My Text My Text My Text My Text My Text'[/tt]

Basically something really long, then IE renders the actual textbox (i.e. the input type text) to the width of ALL the text (i.e. 100% width)!! It doesn't just keep the width of the input type text to the width of the table its contained in and scroll the excess text like normal. In Mozilla there is no problem, only in IE. If I don't use a % width for the input type text then it's fine, but using a % width causes it to render ALL the text on the page; however, I want the width of the input type text to expand and shrik as the browser window is resized (i.e. I don't want a fixed width).

Does anyone have a work around for this?

 

[Vragabond]

I think this will boil down to the nature of tables to fit the content. And where FF does it top down (input will fit the table), IE does it bottom up (content in input will expand the table). Try giving [tt]table-layout: fixed;[/tt] to your table declaration. That helps IE respect the given table sizes more.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[bitwise]

Thank you Vragabond, that fixed the problem.

 

[feherke]

Hi

Nice trick, Vragabond. I also hit such problem, was quite a pain.

Feherke.

http://rootshell.be/~feherke/