IE Textarea 100% width bug
I recently finished work on tinyprice.de, an online community for exchanging coupon codes. The programming part was not a problem at all - just simple database I/O etc. - the layout however was quite a challenge.
Of course, the only browser making problems was Microsofts IE6. It was quite a struggle, but in the end I managed to work around every bug, without using any dirty hacks.
One particular problem I encountered, was a textarea for user comments, that had a width: 100% style. In IE6 it always spanned over the whole page, not only over the parent element. The solution I found after a lot of research, was quite simple: just wrap the textarea in a fieldset AND a div element, and everything works fine again:
<fieldset>
<div>
<textarea style="width: 100%;" name="content"></textarea>
</div>
</fieldset>

8 Comments:
stuck with same problem. thx 4 solution.
great, thanks, looked all over for this
I tried it before with just a <fieldset> wrapping a <textarea> but it didn't work. Using BOTH <fieldset> and <div> really fixes the bug. Burn IE, burn!
Same here...the div makes the difference. Also...it helps to set the fieldset's margins and borders to 0 (at least in my particular case).
thanks for the solution
I dont link designing since we need to optimize for the IE, if the IE wasnt there programming might be fun
It took me a day to work around.
Thanks for your solution.
This did the charm, it did take a while to find - needs to be at the top of Google!
Thank you a lot!!!!! for your solutions!
I've wrote little JS to fix it, but it falls down when I resize window (in ie6 only :-D)
Post a Comment: