CSS absolute div inside relative parent for Firefox [duplicate]

Question

I'm trying to position a div inside a table. The parent has position: relative while my div las position: absolute. I usually develop in chrome and it works just fine there but when I open firefox my absolute div ignores it's parent and occupies the whole page.

Here's an example which works in chrome but not in firefox: http://jsfiddle.net/pdFSh/

Any ideas?

Answer 1

You'll need to change the display value of #absolute's parent:

table tr#body td { display: block; }

Answer 2

It was the known bug of Firefox (fixed since Firefox 31). Before it was fixed, the common workarounds were nesting the div inside the table cell and setting position: relative to it, or changing the display of the cell itself to display:block (which converts the cell to a div-like block box nested in the anonymous table cell box). The second approach seemed to be applicable in this case because the height of the cell is fixed.