DIV over table cell (Firefox issue)

Question

I want div to be appeared over table cell (filling the entire space of the cell, div width=100% and height=100%) on mouseover event.

In IE8 and Chrome it looks like i want it to be, but in Firefox div appears beyond the boundaries of the table cell.

Code example on jsfiddle

Answer 1

You use position: relative; on the td element. Firefox ignores this value on table cells, see this bug.

To circumvent this beahaviour you can create a single child of the td which serves as a wrapper.

<td>
    <div class="table-cell-wrapper">Your absolute positioned content here</div>
</td>

And with this CSS you give the wrapper the dimensions of the table cell.

.table-cell-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

I updated yout jsfiddle here http://jsfiddle.net/RDq8Q/2/. You need to adjust the exact posionting again, but yout overlay works now.