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>

Monday, October 8th 2007
Tags: CSS, HTML

26 Comments:

#1: Alpha – Tuesday, December 25th 2007, 17:30

stuck with same problem. thx 4 solution.

#2: fdqepd – Monday, March 17th 2008, 18:41

great, thanks, looked all over for this

#3: Smartphone Freeware – Saturday, March 22nd 2008, 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!

#4: tf – Thursday, May 1st 2008, 22:27

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

#5: Leo – Sunday, May 11th 2008, 21:00

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

#6: Masshi – Tuesday, May 20th 2008, 19:58

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

#7: Brandon – Friday, July 18th 2008, 01:00

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

#8: Maxceem – Wednesday, August 20th 2008, 20:14

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)

#9: MOin – Wednesday, September 24th 2008, 20:52

I am really sick of the problem, when website works all well on any other browser on this planet except internet explorer, IE sux when it comes to rendering page content. and your fix works all well thanks a lot.

#10: Smartphone Freeware – Monday, October 27th 2008, 16:29

Moin, I can understand you. I hate IE as well. If not so many uninformed people out there who use IE 5/6/7/8 I would never bother myself to hack HTML code to support it. But the reality is that webmasters still have to consider IE6 as a popular browser and support it. :(((

#11: Bharat Karavadra – Thursday, December 18th 2008, 13:14

Internet Explorer Beta also seems to have similar problem.

Read more at this Link:
www.setforever.org/blog/2008/internet-explorer-8-beta-2-bug-text-fields-content-issue/

#12: Anon – Tuesday, January 27th 2009, 12:43

Cheers mate! Worked a treat!

#13: richK – Tuesday, March 3rd 2009, 18:19

Great! Great! Great! Thanks to you I will not be spending my afternoon fixing this!

#14: anon – Tuesday, March 10th 2009, 14:25

Does not work for me :/

#15: xav – Thursday, March 12th 2009, 09:02

Ugh - it /works/, but it messes with my DOM!

Am I bitter enough to exclude anyone who uses IE from my site? I'm seriously thinking on it...

#16: enigma – Thursday, April 2nd 2009, 18:38

I was stumped on this for a site I am building. Stupid IE.

Great fix though!

#17: wwns – Tuesday, April 7th 2009, 15:09

Good!
Thanks~~

#18: brandon – Tuesday, April 14th 2009, 23:59

you rule!

#19: GregZ – Thursday, May 14th 2009, 23:30

My problem was a

<textarea>

with relative width (100%) would continually resize width as the user typed in it. Annoying. But wrapping it in a

<fieldset>

fixed it all up

#20: Frank – Sunday, June 7th 2009, 15:09

That ended a two hour search for a workaround... thanks!

#21: Marat – Tuesday, July 7th 2009, 09:56

You're a genius!

#22: Me at work – Tuesday, July 7th 2009, 16:53

You star! Dont need the divs by the way

#23: Wimpog – Monday, August 17th 2009, 17:19

WICKED COOL!!!

#24: Trilliput – Thursday, November 12th 2009, 09:15

Thanks a lot! It is genius!
On the my page textarea changed size when I typing! :crazy:
This solution helped me!!!

#25: GNP – Tuesday, March 23rd 2010, 13:37

Good one. Thanks a lot.

#26: JSCONSUL – Thursday, August 26th 2010, 13:22

Cool!!!!!

IE Textarea 100% Width Bug

26 Comments:

Post a Comment:

Comment: (Required)

Name: (Required)

URL: