Question

Example

The yellow represents the link/clickable area.

CSS

#shipment-list a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: inherit;
    background-color: yellow;
    margin: 0;
    padding: 0;
}

HTML

        <td>
            <a href="#">
                Jul 24, 2011 @ 1:05p.m.<br>
                (4 hours, 19 minutes ago)
            </a>
        </td>

I can’t seem to reproduce it in a jsFiddle however, and I can’t link you to the live page because it’s running off localhost and contains some confidential information.

Any idea what might be causing this?

I get the same result in FF4 and IE9.

Edit: Figured out what was causing the problem. Still don’t know how to fix it. The td basically shrinks to its contents, even though it doesn’t appear that way. I don’t want to explicitly define the height of my td though, so how do I get around this?

Answer 1

The answer has been posted a couple of times under different names.

How can I get a div to fill a table cell vertically?

Make a DIV fill an entire table cell

NOTE: These solutions assume the table has an explicit height.

In Chrome, position: relative is your friend. It’ll force the <a> to take up the entire table cell’s height and width. Sadly this isn’t enough to make it work in FF and IE. Check the demo.

To make it work in Chrome + FF, you can use display: table instead of display: block. Check it out.

While IE8 and IE9 both support display: table, they don’t like its usage in this solution unless you give <td> a height of 100%, as seen in this third demo. If you resize your browser window or the width of the table, you’ll notice that the link doesn’t reach the full height of the cell. That’s because the link is going off 100% (<a>) of 100% (<td>) of 300px (<table>), so the link will be at most 300px tall. It’s a compromise, and one I’m not sure you’ll be able to work around.