title: textarea inside div
body: <p>I think i'm doing something wrong here, I expect the textarea to be 10px smaller than the parent div on every side, but it's not like that, it's too small:</p>
  
  <pre><code>&lt;html&gt;
    &lt;div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;"&gt;
      &lt;textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/2a7LR/1/" rel="nofollow">http://jsfiddle.net/2a7LR/1/</a></p>
  
  <p>why does this happen ? and how can i make it so it fits 10 px smaller in each side from the parent div ?</p>
  
  <p>It appears correctly only in chrome/safari, but wrong in every other browser ( firefox, opera, IE8 )</p>