title: cell borders not displaying in firefox
body: <p>I've got a pretty simple table, which should have both table and cell borders displayed. This works fine in Chrome and IE, but Firefox displays only the table border, and not cell borders. Here's the HTML:</p>
  
  <pre><code>&lt;table border = "1" class ="MyTable"&gt;
     &lt;tr&gt;
         &lt;td class = "c1"&gt;&lt;/td&gt;
         &lt;td class = "c2"&gt;&lt;/td&gt;
         &lt;td class = "c3"&gt;&lt;/td&gt;
         &lt;td class = "c4"&gt;&lt;/td&gt;
         &lt;td class = "c5"&gt;&lt;/td&gt;
         &lt;td class = "c6"&gt;&lt;/td&gt;
         &lt;td class = "c7"&gt;&lt;/td&gt;    
         &lt;td class = "c8"&gt;&lt;/td&gt;
         &lt;td class = "c9"&gt;&lt;/td&gt;
         &lt;td class = "c10"&gt;&lt;/td&gt;
  &lt;/tr&gt;   
  &lt;/table&gt;
  </code></pre>
  
  <p>(all the td classes are there to be referred to in later javascript btw - but aren't relevant to this problem, or at least I wouldn't think so)</p>
  
  <p>And here's the CSS:</p>
  
  <pre><code>table.MyTable {
      margin-left: 10%;
  }
  
  table.MyTable td
  {   
     width: 20px;
     height:30px;
     border: 4px solid black;
  }
  </code></pre>
  
  <p>I've tried 1) using table id instead of table class; 2) removing <code>&lt;table border ="1" &gt;</code> from the HTML and adding the styling information in the CSS instead; 3) splitting the CSS code into separate border-style, border-color and border-width commands. In every case, the code displays as it should in Chrome and IE, but not Firefox.</p>
  
  <p>For reference, this is what it should look like (in Chrome): </p>
  
  <p><img src="https://i.stack.imgur.com/XKSuJ.png" alt="Correct rendering in Chrome"></p>
  
  <p>This is what it looks like in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/vy3nX.png" alt="Incorrect rendering in Firefox"></p>