css absolute position inside table-cell work everywhere except firefox

Question

I have horizontal news which look like this: DEMO

If you run this fiddle in Firefox, it displays different then in other browsers. On my webpage it position random position (always same).

I have to use position: absolute; because I want to keep the date and buttons at the same level in all columns.

I google it but all solution doesn't work for me.

So my question is how to position in to look like DEMO.

Answer 1

Looks like: http://bugzil.la/203225

It was logged over 10 years ago.

As a workaround you could use a div within the TD and set that to position:relative instead of setting it on the TD directly.

Answer 2

For me, it looks like you found a Bug in Firefox related to the CSS table layout. The absolute positioned elements with class .date and .button should be placed relative to the bounderies of their relative positioned parent element with class .col. But they are not in Firefox.

If you remove the property display: table-cell; then date and button are placed relative to their parent again, but you lose the desired table layout.

One solution to avoid this problem is to use a float layout instead of table-cell: JSFiddle Example