Google Answers Logo
View Question
Q: HTML: Extra whitespace around textarea element in IE6, how to remove? ( Answered 5 out of 5 stars,   0 Comments )
Subject: HTML: Extra whitespace around textarea element in IE6, how to remove?
Category: Computers > Internet
Asked by: davious-ga
List Price: $12.00
Posted: 26 Jul 2002 14:24 PDT
Expires: 25 Aug 2002 14:24 PDT
Question ID: 45562
In Internet Explorer 6 on Windows textareas seem to have an extra
pixel of space above and below them.  I want to know some HTML or CSS
code to display the textarea without this whitespace.  Here's some example code:

<table border=0 cellspacing=0 cellpadding=0 width=500 style="border:
red 10 solid"><tr><td bgcolor="yellow">
<TEXTAREA id=_box1_editor style="WIDTH: 100%; HEIGHT: 200px; border:
none; background-color: green">

The extra pixel will show as yellow in IE6.  I've turned off the
textarea border and added colors so it's more obvious, but the problem
is there even with standard borders on. If you replace "textarea"
with "iframe" there will be no extra pixels above and below.
Subject: Re: HTML: Extra whitespace around textarea element in IE6, how to remove?
Answered By: j_philipp-ga on 26 Jul 2002 15:19 PDT
Rated:5 out of 5 stars
Hello Davious,

To remove the extra-pixel that shows above and below the textarea, add
the following two margin properties to the textarea inline-style:

<TEXTAREA id=_box1_editor
    style="margin-top: -1px; margin-bottom: -1px; (...)">

This will not only solve the problem in IE6, but also in Netscape6/

Hope that helps!

Request for Answer Clarification by davious-ga on 26 Jul 2002 16:38 PDT
j_philipp, once again, great answer!  A couple questions, will
specifying negative values cause any problems?  Is it valid CSS? Will
future browsers render the textarea without this whitespace and thus
cause problems with negative values?  Any idea why the extra space is

Thanks!  I'd like a little more background info, but your original
answer is adequate regardless.

Clarification of Answer by j_philipp-ga on 27 Jul 2002 03:44 PDT
Hello Davious,

Thanks for the comments.
Yes, this is valid CSS. You can test it using the official validator:

W3C CSS Validator

If you enter the following, it validates:

        margin-top: -1px;
        margin-bottom: -1px;

Now, if we go to the W3C CSS2 specification, we can look up the margin

W3C CSS2 Specification
"Negative values for margin properties are allowed, but there may be
implementation-specific limits."

So, as with most of the CSS you will write, there is no guarantee it
will work in all current, and future browsers. The important thing to
keep in mind is: when a certain property-value is ignored or
misunderstood by the browser, is the content still readable? In your
case, the fallback -- that is, a border above and below the textarea
-- would be relatively harmless. The best thing one can do is check in
popular browsers today, and make sure it validates according to the
World Wide Web Consortium to be prepared for the future.

As to why the whitespace is there, this one baffled me too. I
cross-checked in the Mozilla1 rendering engine, and by my
understanding setting a padding style of zero to the wrapping
td-element should have done the job (I also removed whitespace before
and after the td, so that the textarea element would immediately
follow). You already did the same thing with the cellpadding of zero.
However, after many tries, the approach outlined in the original
answer was the only one that worked.


W3C HTML4 Specification - Cell margins

W3C CSS2 Specification - Tables

Hope that helps!
davious-ga rated this answer:5 out of 5 stars
Exactly the information I needed, thanks!

There are no comments at this time.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy