html - Inconsistent textarea handling in browsers -
here's i'm seeing markup provided below. none of browsers keeping textareas in container inconvenient not big of issue. however, annoying no matter can't rid of bottom margin textarea in chrome. suggestions?
here in 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; }
to fix "the bottom margin textarea in chrome", add vertical-align: top
#txtinput
.
now have consistent rendering between browsers listed.
do want solution textarea
extending outside container?
this fixes ie8, firefox, chrome, safari, opera. doesn't in ie7 though:
#txtinput { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
here, we're using box-sizing
property.
there's way right in ie7, unless care browser, it's best live protruding ~3px
outside container in browser.
Comments
Post a Comment