CODEWITHSUNDEEP
htmlcssfirefoxpadding
Nathan Ridley
Nathan Ridley

Reputation: 34426

CSS table cell padding issue in Firefox and IE8

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.

Upvotes: 1

Views: 11808

Answers (4)

Emily
Emily

Reputation: 10088

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

Upvotes: 9

usoban
usoban

Reputation: 5478

<td valign="middle">

Not the best way, since you don't use css, but it always worked for me.

Adittionally, take a look at line-height css property for cell. If your cell is 20px high, set line-height to 20px etc.

Upvotes: 0

Mauro
Mauro

Reputation: 4511

Try this in your cells, for this to work though I believe the cells need a height specified in them.

css vertical-align

Upvotes: 0

Rahul
Rahul

Reputation: 12231

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.

Upvotes: 2

Related Questions