title: CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't
body: <p>I'm trying to achieve cross-browser consistency for my website.</p>
  
  <p>It's about this page: <a href="http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html">http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html</a> (please note that I prefer this URL not to be made crawlable for seo-bots)</p>
  
  <p>If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).</p>
  
  <p>What seems to be the problem?  </p>
  
  <p>It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.  </p>
  
  <p>The (most) relevant CSS-lines are the following ones (from the <code>table.css</code> file, also available through the page's source file):</p>
  
  <blockquote>
  <pre><code>table.uitbetaling {
   margin: 11px 18px 10px 19px;
   border: 1px solid #8ccaee;
   width: 498px;
   padding: 0;
  }
  table.uitbetaling img, table.uitbetaling td {
   margin: 0;
   border: 0;
   padding: 0;
   width: 496px;
  }
  table.uitbetaling tr {
   margin: 0;
   border: 0;
   padding: 0 1px 0 0;
  }
  </code></pre>
  </blockquote>
  
  <p>So basically I have used a table-structure to organize images, like this: (the class of the table is <code>uitbetaling</code>)</p>
  
  <blockquote>
  <pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;&lt;img /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;img /&gt;&lt;/td&gt;&lt;/tr&gt;
  ...
  &lt;tr&gt;&lt;td&gt;&lt;img /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  </blockquote>
  
  <p>If, here, I set the width of <code>table.uitbetaling</code> and <code>table.uitbetaling img, table.uitbetaling td</code> to the same value (e.g. both <code>496</code> or <code>498</code>), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. <code>img</code> and <code>td</code> must be at least 2px more narrow than <code>table.uitbetaling</code> for the right-border be visible in Firefox.</p>
  
  <p>Is there any way to solve this?</p>