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


source to share

1 answer

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.

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


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.



All Articles