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?

textarea handling in different browsers 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.

live demo

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:

live demo

#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

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -