DIV by table cell (Firefox issue)

Question

I want the div to appear above the table cell (filling the entire cell space, div width = 100% and height = 100%) on mouseover event.

In IE8 and Chrome, it looks like what I want, but in Firefox the div appears outside the table cell.

Sample code at jsfiddle

+3

html css

user947668 11 Mar 12 at 9:48 am

source to share

1 answer

Jona · Accepted Answer · 2012-03-11T10:19:39+0000

You are using position: relative;

in an element td

. Firefox ignores this value in table cells, see this error .

To get around this beahaviour, you can create a single child td

that 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 fine-tune the positioning again, but now you are overlaying.