How to Force Firefox to Render Textarea Padding the Same as in a Div

Textarea and div padding differences in Firefox

I can reproduce the described behaviour on Firefox 20.0.1 using this jsFiddle.

I have had a bit of a look around for you, it seems that Firefox has had quite some issues with paddings in combination with textareas in the past, so I'm thinking you might not be able to get rid of it.

I'm not sure if you would class vendor specific prefixes as a browser hack, but I've got one for you.

You can add -moz-padding-start: 2px; and -moz-padding-end: 2px; to your CSS rule, that will fix your wrapping issue: jsFiddle.

Div and textarea behave the same except in Firefox - what to do?

I think you are running into an issue where Firefox adds 1.5px of padding inside textarea elements.

Firefox has had quite some issues with paddings in combination with textareas in the past, I think you might not be able to get rid of these additional 1.5px of padding.

I was able to fix your wrapping issue by setting some vendor specific prefixed CSS properties on div.highlighter. Here's a jsFiddle.

.highlighter {
  background-color: #eee;
  color: #f0f;
  -moz-box-sizing: border-box;
  -moz-padding-end: 1.5px;  
  -moz-padding-start: 1.5px;      
}

Setting these properties ensures that

1. In Firefox, the padding set on the div does not increase the width of the div, and
2. that, in Firefox, 1.5px of padding will be set on both the right and the left hand side of the div.

Update

After some time of using 2px and still very occasionally experiencing some wrapping inconsistencies, I decided to give 1.5px a go, and for now that seems to have ironed out the occasional inconsistencies.

Textarea and div padding differences in Firefox

I can reproduce the described behaviour on Firefox 20.0.1 using this jsFiddle.

I have had a bit of a look around for you, it seems that Firefox has had quite some issues with paddings in combination with textareas in the past, so I'm thinking you might not be able to get rid of it.

I'm not sure if you would class vendor specific prefixes as a browser hack, but I've got one for you.

You can add -moz-padding-start: 2px; and -moz-padding-end: 2px; to your CSS rule, that will fix your wrapping issue: jsFiddle.

firefox textarea placeholder padding

instead of giving padding:5px to the placeholder, give it to textarea. that way you are sure you won't have any problems;

see here jsfiddle

code :

textarea { 
padding:5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-input-placeholder {
    text-align:left;
    font-size:11px;
}
:-moz-placeholder { /* Firefox 18- */
    text-align:left;
    font-size:11px;
}
::-moz-placeholder {  /* Firefox 19+ */
    text-align:left;
    font-size:11px;
}
:-ms-input-placeholder {  
    text-align:left;
    font-size:11px;
}

html :

<textarea rows="4" name="mensaje" placeholder="CONSULTA" required="required" >  </textarea>

Position text inside textarea in FireFox

I think I can claim the most elegant solution for this. Firefox doesn't subtract one pixel from the text area, but one half pixel. Take a look at this:

http://jsfiddle.net/e4YGW/19/

Tested in latest versions of Firefox, Chrome, Opera, and Safari.

Div and textarea behave the same except in Firefox - what to do?

I think you are running into an issue where Firefox adds 1.5px of padding inside textarea elements.

Firefox has had quite some issues with paddings in combination with textareas in the past, I think you might not be able to get rid of these additional 1.5px of padding.

I was able to fix your wrapping issue by setting some vendor specific prefixed CSS properties on div.highlighter. Here's a jsFiddle.

.highlighter {
  background-color: #eee;
  color: #f0f;
  -moz-box-sizing: border-box;
  -moz-padding-end: 1.5px;  
  -moz-padding-start: 1.5px;      
}

Setting these properties ensures that

1. In Firefox, the padding set on the div does not increase the width of the div, and
2. that, in Firefox, 1.5px of padding will be set on both the right and the left hand side of the div.

Update

After some time of using 2px and still very occasionally experiencing some wrapping inconsistencies, I decided to give 1.5px a go, and for now that seems to have ironed out the occasional inconsistencies.

Bootstrap's textarea renders oddly and ugly in firefox

Add this to your css part:

textarea {
    border: 1px solid #eee;
}

Textarea to fill a parent container exactly, with padding

Use width: 100%; height: 100%; to make the <textarea> fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.

Edit: To use width: 100%; along with padding, you can change the box sizing model:

    width: 100%;
    height: 100%; 
    box-sizing: border-box;

With this change, 100% now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.

Button text pushes away the padding in Firefox

You should use the <button> element, this gives you more control over what happens with its contents:

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

And the styles then are:

.wrong {
    width: 100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align: left;
    white-space: nowrap;
}

Example that should work in all browsers: http://jsfiddle.net/p8mg8/1/

---

Related Topics