Blog Home

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

— Dominic Szablewski, @phoboslab

38 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!!!!!

#27 – Loccy – Monday, January 31st 2011, 10:13

I hereby award this page and those taking part in it 1,000 intarnets.

Frakking IE. I am sorely tempted to write a virus that quietly removes IEXPLORE.EXE, then downloads a themed version of Chrome that looks exactly the same to replace it.

#28 – aguirre – Monday, May 9th 2011, 11:30

Great fix. If you hide the border of the textarea and let the fieldset be your border, it works nearly perfect like the textarea itself.
Thx

#29 – sanjuro – Sunday, May 15th 2011, 01:23

Doesn't work at all for me. After adding those wrappers, the textarea block goes past the fieldset. But it's not a problem, I'll use the cols/rows attributes instead.

#30 – Khash – Wednesday, December 14th 2011, 23:28

It didn't work for me :( I have a table with 2 columns and in each I have a textarea, when you write on the one on right side it expands and cause the left one to becomes smaller, is there any suggestion?

#31 – Frank – Sunday, April 1st 2012, 18:03

Thanks man.

Have a nice day.

#32 – Corey – Thursday, June 28th 2012, 18:37

How is that not a "dirty hack"?

#33 – Otto – Tuesday, October 2nd 2012, 11:32

Big thanks for that great hack - I search even more then one hour for a solution!

THANKS

#34 – fdqs – Thursday, November 28th 2013, 09:40

thx

#35 – Nuno – Friday, March 14th 2014, 10:36

Big thanks for the information! It saved me an awful lot of hours debugging my application. The solution is applicable to older browser versions such as IE5 (I know medieval times).

#36 – GB – Tuesday, July 29th 2014, 17:20

Suffering the same problem with an iframe in ie8 :@

#37 – Nare – Wednesday, September 3rd 2014, 22:15

Thanks Man.. Really helped.

#38 – ajaulensaek – Friday, September 30th 2016, 12:50

Thanks lad, still had this issue with Internet Explorer 11. However it was enough to wrap the <textarea> in a <div> only to solve it, omitting <fieldset>.

PHOBOSLAB

IE Textarea 100% Width Bug

38 Comments: