phoboslab

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>
CSS, HTML / 2007.10.08 - 13:40

8 Comments:

2007.12.25 - 17:30
#1: Alpha

stuck with same problem. thx 4 solution.

2008.03.17 - 18:41
#2: fdqepd

great, thanks, looked all over for this

2008.03.22 - 21:51

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!

2008.05.01 - 22:27
#4: tf

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).

2008.05.11 - 21:00
#5: Leo

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

2008.05.20 - 19:58
#6: Masshi

It took me a day to work around.
Thanks for your solution.

2008.07.18 - 01:00
#7: Brandon

This did the charm, it did take a while to find - needs to be at the top of Google!

2008.08.20 - 20:14
#8: Maxceem

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:

Comment: (Required)

Name: (Required)

URL:

Please type phoboslab here to verify you are human: