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">
</TEXTAREA>
</td></tr></table>

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.

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/
Mozilla1.


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
there?

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
http://jigsaw.w3.org/css-validator/validator-text.html

If you enter the following, it validates:

    textarea
    {
        margin-top: -1px;
        margin-bottom: -1px;
    }

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

W3C CSS2 Specification
http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin
"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.


References:

W3C HTML4 Specification - Cell margins
http://www.w3.org/TR/1998/REC-html40-19980424/struct/tables.html#h-11.3.3

W3C CSS2 Specification - Tables
http://www.w3.org/TR/REC-CSS2/tables.html


Hope that helps!

Exactly the information I needed, thanks!