CSS table cell padding issue in Firefox and IE8

Question

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.

See as follows:

alt text http://www.graphicsdistrict.com/css-issue.png

Here is my table css:

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 > 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 > tfoot > tr > 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;
}

Here is my table HTML:

<table class="standard maxwidth striped hover">

    <thead>
        <tr>
            <th class="left">Accessory</th>
            <th class="center">Available</th>
            <th class="right">Options</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/4">Mains Charger</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/4" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <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;">Delete</a>

            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/3">Bluetooth Headset</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/3" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>

            / <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;">Delete</a>
            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/2">Car Kit</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>

            <td class="right">
            <a href="/mss/Accessory/Archive/2" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <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;">Delete</a>
            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/1">Leather Phone Case</a></td>

            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/1" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <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;">Delete</a>
            </td>
        </tr>


    </tbody>
    <tfoot>
        <tr>
            <td colspan="3"><a href="/mss/Accessory/New">Add an Accessory</a></td>
        </tr>
    </tfoot>
</table>

Note that the spacing before and/or after the contents of the cell does not seem to affect the issue, either positively or negatively.

EDIT

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?

EDIT 2

There is now a demonstration of the issue online here.

Solution 1

The image is vertically aligned on the baseline leaving room for descenders - just in case you add text. Vertically align to the bottom and the extra space goes away.

td img {vertical-align:bottom;}

Solution 2

Try using pixels for your padding and borders and see if that solves the problem. I suspect the fact that you're using ems is generating some weird rounding glitch that causes the 4px/5px difference.

Comments

[David Hedlund]

Do you have a link to a live sample of this? It would be helpful to be able to model about with this in firebug or similar.

[Nathan Ridley]

Ok, done. I've uploaded to graphicsdistrict.com/css-issue/Accessory.htm

[Ryan]

Oh good, poster puts the image on his own server then deletes it when his issue is solved. HELPFUL!

[Nathan Ridley]

Actually this was before StackOverflow introduced its own image hosting, so I had to put it somewhere myself. The original image was unfortunately lost when I changed hosting.

[Nathan Ridley]

Thanks. Changing to pixels fixed the text positioning inconsistency in the first column but doesn't solve the vertical centering issue in the icon column though...

[Nathan Ridley]

I think you mean valign="middle"? "center" is only used on horizontal alignment.

[Rahul]

It's hard to see what else could be causing issues. If you could reproduce the entire page somewhere for me to check, I might be able to help a bit better. It looks like you have some css classes applied to the table (class "center" for instance) that aren't reproduced in the css you posted, so maybe you should look at what rules those are declaring?

[usoban]

Woops, you're right. Haven't used this for a while and seems like I forgot it ;)

[Nathan Ridley]

In any case, it didn't solve the problem. The css style vertical-align duplicates the effect anyway.

[Nathan Ridley]

That's been there from the start.