How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.
Textarea padding inconsistency in Firefox and Chrome
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
how to remove the margin below a textarea inside a div wrapper (webkit)
Try display:block on the textarea:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
Inconsistent textarea handling in browsers
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.
Resizing a `textarea` in Chrome adds an inline CSS property `margin`, but Firefox doesn't add it... Why?
This is an interesting behavior in Mozilla. This need to be share to relative Mozilla community. For temporary solution you can override inline "margin" property by using !important property in CSS. Try below code :
div { display: inline-block; padding: 5px; background: #f00;}
textarea { display: block; margin:0 !important;}<!DOCTYPE html><meta charset="utf-8"><title>Test</title><div> <p>hellohellohellohellohellohellohellohello</p> <textarea></textarea></div>scroll-margin-top not working on textarea in chrome based browsers
You may use this instead.
scroll-padding-top: 6rem;
Why div adds 4 pixels on the bottom of a textarea on chrome and safari (but not on firefox)?
That's because the textarea is displayed as an inline element. So, the way it's height is calculated is not as you would expect from a block element.
This will solve your issue:
textarea { display: block; }
Also, this way you guarantee that both your textarea and your container have the same height. Cheers.
Cross browser inconsistencies with margins?
It's most likely the em units you're using everywhere for widths, margins and padding. The em unit is based on font size and webkit renders fonts slightly differently than gecko (the same text in webkit and gecko will be different widths).
As a test, change your CSS widths, padding and margins to absolute px values and check if this fixes the inconsistencies.
Related Topics
CSS - Fonts Render Differently in Firefox and Chrome
Image Button Displaying 'Submit Query' Over the Top of Image in Firefox
Box-Sizing: How to Get Rid of the Scrollbar Padding in Firefox
What Is the Scope of the * CSS Hack
CSS Background Color Keyframes Animation
How to Animate Infinite Marker Movement Down an Svg Path Without Very High CPU Usage
What Transition-Property to Use for Transform
CSS Icon Using :Before Keep Text from Wrapping Under
:Before and :After Pseudo Elements on HTML Tag Is Wonky in Chrome
Not (Max-Width: 512Px) Not Working
CSS Perspective Not Working in Firefox
How to Make CSS Max Width in IE6 and 7
How to Remove Fade from Gradient in CSS
100% Width Divs Not Spanning Entire Width of the Browser in Webkit