Textarea field, border 2px on focus, moves other HTML elements
<p>The problem: 
I've created a simple test page (below) to demonstrate what the problem is. 
When you set CSS on textarea field with <strong>border = 2px</strong>, the textarea will resize itself 
and hence all fields/content below textarea will move down. </p>

<p>This only applies to textarea and select fields while input field doesn't act this way. </p>

<p>I've tested this in IE, Opera and FF and none of them produce the same behavior, 
they all work like they should while Chrome moves all elements below them. </p>

<p>Anyone knows a fix that will prevent this with CSS? </p>

<p>The example: </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; 
&lt;head&gt; 
&lt;title&gt;&lt;/title&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
&lt;style language="text/css"&gt; 
textarea:focus { 
        border: 2px solid #000000; 
} 
textarea { 
        width: 300px; 
        height: 100px; 
        resize: none; 
        outline: none; 
} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 

&lt;form&gt; 
&lt;textarea name="test" cols="0" rows="0"&gt;&lt;/textarea&gt; 
&lt;br /&gt; 
This text and button will move a few pixels down when you click in textarea field. 
&lt;br/&gt; 
&lt;input type="submit" name="submit" value="submit"/&gt; 
&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>