5

I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.

Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.

When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:

.testbox{
    padding:0;
    margin:0;
    border:0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

Other values for padding wind up displaying one extra pixel of offset vs a div.

Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?

Greg Borreson
  • 213
  • 3
  • 8
  • Maybe a silly thing to say, but why don't you give your div a padding of 1 more than the textarea, so both match? [mumbles something about a mountain and Mohammed] – Bazzz Dec 07 '10 at 08:17
  • It's more about trying to shave that extra padding off that's screwing with the textarea's content's width. A div is just a good baseline block element for comparison which happens to not suffer from this oddity. – Greg Borreson Dec 07 '10 at 08:26

5 Answers5

2

I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.

Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.

Getting textarea's to wrap content the same as e.g. div elements in Firefox

It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:

-moz-box-sizing: border-box;
-moz-padding-end: 1.5px; 
-moz-padding-start: 1.5px;

The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.

This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.

Here's a jsFiddle for demonstration purposes.

Getting textarea's to wrap content consistently across browsers

If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.

textarea {
    padding: 0 5.5px 0 5.5px;
    -moz-padding-end: 0px;
    -moz-padding-start: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Here's a jsFiddle showing this approach.

Community
  • 1
  • 1
Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
1

This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.

I already tried the latest nightly build and the textara bug is gone!

mkurz
  • 2,658
  • 1
  • 23
  • 35
1

Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:

.testbox {
    padding: 10;
    margin: 10;
    border: 5px solid black;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

You could work around this by using something like this:

<div class="testbox">
    <textarea class="testarea"></textarea>
</div>

css:

.testbox {
    padding: 0;
    margin: 0;
    border: 0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

.testarea {
    padding: 0;
    margin: 0 -1px;
    border: 0;
    background: red;
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 16px;
}

This also seems to work in IE, except for the -1px, which throws the layout off (by one).

Spiny Norman
  • 8,277
  • 1
  • 30
  • 55
  • Oops, please excuse my earlier css which made little sense. I guess 9:52 is early on a Tuesday. Anyway, I guess the important point here is that firefox does some very strange things and you will have to find some kind of workaround, which means you can pretty much do anything you want as long as it looks good... – Spiny Norman Dec 07 '10 at 08:57
  • I'll give this a try later tonight. – Greg Borreson Dec 07 '10 at 20:14
0

I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.

Babiker
  • 18,300
  • 28
  • 78
  • 125
  • I'm having pretty much the reverse problem, because I'm trying to keep the normal functionality of the textarea while having the appearance (and most importantly the cross-browser consistency) of the div. – Greg Borreson Dec 07 '10 at 19:45
0

I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.

kpl
  • 1