Databases
StackOverflow2013
Postsdbo
POCSS table cell padding issue in Firefox and IE8
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS table cell padding issue in Firefox and IE8
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload