title: Table cell and border displaying differently in IE/Chrome and Firefox/Opera
body: <p>After several hours of frustration I finally turned to the internet for the answer. Imagine this extremely simple piece of code:</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&gt;
      &lt;head&gt;
          &lt;title&gt;AARRRRRRGH&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now this seems pretty straightforward, create a table cell 100px wide and 100px high with a 6px border. As simple as it seems, it looks different in different browsers. In IE8 and google chrome the table cell is 112 x 112 px (so 100px inside and 6px outside). In Firefox 3 and opera the table is 112 x 100 px (so for some reason the border is added to the table width but not to the table height).</p>
  
  <p>Seriously, what gives? And how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).</p>