position: relative doesn’t work for <td> in Firefox

The Problem

While working on a new page for a client this morning I discovered that relative positioning doesn’t work for td elements in Firefox. The page required a three column grid of products and on the bottom of each product cell would be a “buy” link. So, logically I decided I needed to do the following:

  • set position: relative on the td for product grid
  • set position: absolute and bottom: 0 on the “buy” link

It worked in Safari, Chrome and even IE. But failed in Firefox to my dismay – the “buy” link appeared outside the cell it should have been in, along the edge of the browser window. A quick Google search showed that it’s a known issue.

The Solution

Here’s my solution to the problem:

  • wrap the contents of the td in a div
  • set position: relative and height: 100% on that div

The Example

Here’s a web page with examples of the problem and the solution.

Update: It seems this solution has issues when cells in the table row have varying heights. I’ll need to spend some time experimenting.