1

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.

4
  • 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. Jul 15, 2009 at 10:00
  • Ok, done. I've uploaded to graphicsdistrict.com/css-issue/Accessory.htm Jul 15, 2009 at 10:58
  • Oh good, poster puts the image on his own server then deletes it when his issue is solved. HELPFUL!
    – Ryan
    Feb 25, 2013 at 6:02
  • 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. Feb 25, 2013 at 8:57

4 Answers 4

9

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

2
  • 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... Jul 15, 2009 at 10:17
  • 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?
    – Rahul
    Jul 15, 2009 at 10:39
0

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

css vertical-align

1
  • That's been there from the start. Jul 15, 2009 at 10:52
0
<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.

3
  • I think you mean valign="middle"? "center" is only used on horizontal alignment. Jul 15, 2009 at 10:38
  • Woops, you're right. Haven't used this for a while and seems like I forgot it ;)
    – usoban
    Jul 15, 2009 at 10:39
  • In any case, it didn't solve the problem. The css style vertical-align duplicates the effect anyway. Jul 15, 2009 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.