Why absolute position is not right under Firefox 16.0.2

Question

Please see this Fiddle

After I upgraded to FF 16.0.2, the absolute position has problem.

Any suggestions?

Html Part

<table>
<tr>
    <td>
        <div>
            Product 1
            <span>Button</span>
        </div>
    </td>
    <td>
        <div>
            Product 2
            <span>Button</span>
        </div>
    </td>
</tr>

​

CSS Part

tr { height:250px; }
td {
    position:relative;
    width:200px;
    text-align:center;
    border:1px solid #999;
}
div {
    position:absolute;
    top:10px; bottom:10px; left:10px; right:10px; /* as padding */
}
span {
    position:absolute; bottom:0; left:50px;
    width:90px; height:20px;
    padding: 5px 0;
    background:#ccc;
}​

What I want to display is this way:

Answer 1

The problem is: in the CSS 2.1 Spec, position: relative doesn't work on table elements.

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

One solution is to add another <div> inside the <td> and make that position: relative instead.

_{Note: Answer shamelessly "stolen" from: https://stackoverflow.com/a/6079254}