DIV by table cell (Firefox issue)
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
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.