10

Here's what I'm seeing for the markup provided below. None of the browsers are keeping the textareas in the container which is inconvenient but not that big of an issue. However, what is annoying is that no matter what I do I can't get rid of the bottom margin for the textarea in Chrome. Any suggestions?

Textarea handling in different browsers Here is everything in a fiddle: http://jsfiddle.net/radu/RYZUb/

Markup: 

<div id="wrap">
    <textarea id="txtInput" rows="6" cols="20"></textarea>
    <div id="test"></div>
</div>

CSS:

#wrap
{
   background-color:green;
   height:210px;
   width:440px;
}
#txtInput
{
    height:100px;
    width:100%;
    margin:0px;
    padding:0px;
}
#test
{
    background-color:gray;
    height:100px;
    width:100%;
    margin:0;
    padding:0;
}
Radu
  • 8,561
  • 8
  • 55
  • 91
  • If you see different results please also let me know if the browser versions are different. – Radu Mar 04 '11 at 16:33
  • possible duplicate of [Consistently sizing a TEXTAREA under IE, FF, Safari/Chrome](http://stackoverflow.com/questions/2038732/consistently-sizing-a-textarea-under-ie-ff-safari-chrome) – Martin Jespersen Mar 04 '11 at 16:34
  • 1
    @Martin Jesperson: While the questions are similar, I do believe a different issue is brought up by this question. – Radu Mar 04 '11 at 16:37

3 Answers3

18

To fix "the bottom margin for the textarea in Chrome", add vertical-align: top to #txtInput.

Live Demo

Now you have consistent rendering between the browsers you listed.

Do you want a solution for the textarea extending outside the container?

This fixes IE8, Firefox, Chrome, Safari, Opera. Doesn't help in IE7 though:

Live Demo

#txtInput
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Here, we're using the box-sizing property.

There's probably a way to get it exactly right in even IE7, but unless you really care about that browser, it's probably best to just live with it protruding ~3px outside the container in that browser.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Yes, that would be fantastic! – Radu Mar 04 '11 at 16:35
  • I hadn't even heard of this property, this is great. Going back to the first solution, were you aware of `display:block` as Smirkin pointed out? Is `vertical-align:top` less problematic for some reason? – Radu Mar 04 '11 at 16:52
  • Thanks! Unless someone comes up with an even more impressive solution this is the answer I'm accepting. – Radu Mar 04 '11 at 16:58
  • @Radu: In Chrome, `textarea`s default to `display: inline-block`. With this type of issue, usually either setting `vertical-align: top` works, or `display: block` instead. See: [1](http://stackoverflow.com/questions/5090998/why-does-opera-9-have-a-space-between-these-two-images), [2](http://stackoverflow.com/questions/4904668/html5-vertical-spacing-issue-with-img/4906624#4906624), [3](http://stackoverflow.com/questions/5157062/show-div-with-jquery-css-question). Also, http://www.brunildo.org/test/inline-block.html - `vertical-align: top` is the best way to fix your first issue. – thirtydot Mar 04 '11 at 17:37
2

This can be resolved by setting the display to block for the textarea

#txtInput
{
  height:100px;
  width:438px;
  margin:0px;
  padding:0px;
  display:block;
}

The width of the textarea doesn't include the 1px border so reducing the width by 2px will prevent the overflow of the textarea.

detaylor
  • 7,112
  • 1
  • 27
  • 46
  • Hmm, also good solution! I'm seeing much more consistency. Opera seems to be 4 pixels too wide rather than 2, but that's not that big an issue. – Radu Mar 04 '11 at 16:46
  • There is a CSS3 property that forces the width to include the border. You could use this by adding the rule "box-sizing:border-box" to #txtInput – detaylor Mar 04 '11 at 17:23
0

In Chrome 9.0.597.107 a bottom margin of -5px worked for me.

#txtInput
{
    height:100px;
    width:100%;
    margin:0 0 -5px;
    padding:0px;
}
Wizard of Ogz
  • 12,543
  • 2
  • 41
  • 43