title: CSS table cell padding issue in Firefox and IE8
body: <p>I am having some serious issues trying to tweak my layout in a table. In Firefox I get weird top/bottom padding inconsistencies with all text. In both Firefox and IE8 I can't seem to make my icons appear vertically centered in their cells either.</p>
  
  <p>See as follows:</p>
  
  <p><a href="http://www.graphicsdistrict.com/css-issue.png" rel="nofollow noreferrer">alt text http://www.graphicsdistrict.com/css-issue.png</a></p>
  
  <p>Here is my table css:</p>
  
  <pre><code>table.maxwidth {
      width: 100%;
  }
  
  table.standard th {
      color: white;
      font: bold 0.85em Century Gothic;
      padding: 0.6em;
      background-color: #424E4F;
  }
  
  table.standard td {
      padding: 0.2em 0.5em;
  }
  
  table.standard tr + tr &gt; td {
      border-top: 1px dotted #ccc;
  }
  
  table.standard th + th {
      border-left: 1px solid white;
  }
  
  table.standard td + td {
      border-left: 1px dotted #ccc;
  }
  
  table.standard &gt; tfoot &gt; tr &gt; td {
      border-top: 0.18em solid #424E4F;
      padding: 0.2em 0.5em;
  }
  
  table.striped tr.alt td {
      background-color: #eee;
  }
  
  table.hover tr:hover td {
      background-color: #e0e0e0;
  }
  </code></pre>
  
  <p>Here is my table HTML:</p>
  
  <pre><code>&lt;table class="standard maxwidth striped hover"&gt;
  
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="left"&gt;Accessory&lt;/th&gt;
              &lt;th class="center"&gt;Available&lt;/th&gt;
              &lt;th class="right"&gt;Options&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td class="label"&gt;&lt;a href="/mss/Accessory/Edit/4"&gt;Mains Charger&lt;/a&gt;&lt;/td&gt;
              &lt;td class="center"&gt;
  
              &lt;img src="/mss/Static/images/icons/tick.png" /&gt;&lt;/td&gt;
              &lt;td class="right"&gt;
              &lt;a href="/mss/Accessory/Archive/4" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;"&gt;Archive&lt;/a&gt;
              / &lt;a href="/mss/Accessory/Delete/4" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;"&gt;Delete&lt;/a&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td class="label"&gt;&lt;a href="/mss/Accessory/Edit/3"&gt;Bluetooth Headset&lt;/a&gt;&lt;/td&gt;
              &lt;td class="center"&gt;
  
              &lt;img src="/mss/Static/images/icons/tick.png" /&gt;&lt;/td&gt;
              &lt;td class="right"&gt;
              &lt;a href="/mss/Accessory/Archive/3" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;"&gt;Archive&lt;/a&gt;
  
              / &lt;a href="/mss/Accessory/Delete/3" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;"&gt;Delete&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td class="label"&gt;&lt;a href="/mss/Accessory/Edit/2"&gt;Car Kit&lt;/a&gt;&lt;/td&gt;
              &lt;td class="center"&gt;
  
              &lt;img src="/mss/Static/images/icons/tick.png" /&gt;&lt;/td&gt;
  
              &lt;td class="right"&gt;
              &lt;a href="/mss/Accessory/Archive/2" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;"&gt;Archive&lt;/a&gt;
              / &lt;a href="/mss/Accessory/Delete/2" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;"&gt;Delete&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td class="label"&gt;&lt;a href="/mss/Accessory/Edit/1"&gt;Leather Phone Case&lt;/a&gt;&lt;/td&gt;
  
              &lt;td class="center"&gt;
  
              &lt;img src="/mss/Static/images/icons/tick.png" /&gt;&lt;/td&gt;
              &lt;td class="right"&gt;
              &lt;a href="/mss/Accessory/Archive/1" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;"&gt;Archive&lt;/a&gt;
              / &lt;a href="/mss/Accessory/Delete/1" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;"&gt;Delete&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
  
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;&lt;a href="/mss/Accessory/New"&gt;Add an Accessory&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Note that the spacing before and/or after the contents of the cell does not seem to affect the issue, either positively or negatively.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Changing the CSS to use px units instead of em fixes the left column text jog, but does not solve the vertical image centering issue. Ideas?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>There is now a demonstration of the issue <a href="http://www.graphicsdistrict.com/css-issue/Accessory.htm" rel="nofollow noreferrer">online here</a>.</p>