title: HTML input textbox with a width of 100% overflows table cells
body: <p>Does anyone know why the input elements with a width of 100% go over the table's cells border.</p>
  
  <p>In the simple example below input box go over the table's cells border, the result is horrible. This was tested and it happens in the same way on: Firefox, IE7 and Safari.</p>
  
  <p>Does it make sense for you?
  Am I missing something, do you know about a possible solution?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;    
  &lt;html&gt;&lt;head&gt;    
     &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt; &lt;!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional --&gt;
     &lt;title&gt;Test input text in table&lt;/title&gt;
     &lt;style type="text/css"&gt;      
        table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
        table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
        input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
     &lt;/style&gt;    
  &lt;/head&gt;&lt;body&gt;
  
  &lt;table cellpadding="0" cellspacing="0"&gt;
     &lt;tr&gt;
        &lt;td&gt;&lt;p&gt;column one hello babe babe babe&lt;/p&gt;&lt;/td&gt;
        &lt;td&gt;&lt;p&gt;column two hello babe more&lt;/p&gt;&lt;/td&gt;
        &lt;td&gt;&lt;p&gt;column three hello babe more and more&lt;/p&gt;&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;&lt;input type="text" value="test"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" value="test"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" value="test"&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>