Thursday 19 August 2010

IE7 stretches element around text input field

Situation description: one of the application forms has lots of input fields. They're all formatted using table. One main table has two columns, where each of them contains another table with two columns. In each row of the inner table the first cell contains field label and the second cell contains field itself. Whole table is in DIV element with width of 100%.

I received some problem reports from users that by entering large text in the input field (input type="text") of the first column, other column is moving to the left until it completely disappears. Width of the input element is set to 250px. It turns out that IE7 allows input elements to stretch according to the length of entered text. Although width is set to 250px and user sees it as 250px wide, cell is stretched as if input element wouldn't have defined width.

Solution i found is add overflow:hidden style attribute.