IE, CSS & TEXTAREA hell !

Ever tried to have a textarea using full window width with Internet Explorer?

Something like that:

<form>
  <label>
    Try to type in here:
    <textarea style="width:100%">Try to type here!</textarea>
  </label>
</form>

Saw what happened when you typed? The right border just went far east... (with IE 6 at least).

After quite a long search and without further ado because I'm getting really tired of this, here's my workaround, based on an idea from Phil Wilson:

<form>
  <fieldset style="border:none;padding:0;">
    <label>
      Try to type in here:
      <textarea style="width:100%">Try to type here!</textarea>
    </label>
  </fieldset>
</form>

Be very carefull what you do... Here's what you want to avoid, for example (unwanted padding):

<form>
  <label for="t1">Try to type in here:</label>
  <fieldset style="border:none;padding:0;">
    <textarea id="t1" style="width:100%">Try to type here!</textarea>
  </fieldset>
</form>

Finaly, here's the simplest form of workaround I've found:

<div style="width:100%">
  <form>
    <label for="t1">Try to type in here:</label>
    <textarea id="t1" style="width:100%">Try to type here!</textarea>
  </form>
</div>

Enjoy!

-François PLANQUE

2003-07-04