CSS absolute div inside relative parent for Firefox

Question

I am trying to position a div inside a table. Parent has position: relative , and my div las position: absolute . I usually develop in chrome and it works fine, but when I open firefox, my absolute div ignores its parent and takes up the whole page.

Here is an example that works in chrome but not in firefox: http://jsfiddle.net/pdFSh/

Any ideas?

Answer 1

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

 table tr#body td { display: block; } 

Answer 2

This was a known Firefox bug (fixed with Firefox 31). Before it was fixed, common workarounds were nested divs in the table cell and installation position: relative to it or changing the display of the cell itself to display: block (which converts the cell into a div-like block cell nested in an anonymous table box ) The second approach is apparently applicable in this case, because the cell height is fixed.

Answer 3

I fixed this problem by adding the following to table tr#body td CSS:

 float: left; width: 100%; 

Now you will need to monitor the errors of the fields and filling, but they can be avoided by changing box-sizing to elements.

One more note: you must get used to always putting a semicolon,; at the end of the line is each CSS styling.

Edit: adding display: block also works as sent by Andre Dion