Firefox ignores absolute positioning in table cells

Asked 9/1, 2012 at 14:7 Answered 10/9, 2015 at 9:57

I am trying to absolutely position an element inside a table cell. The TD has position:relative and the element has position:absolute.

This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.

You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/

Does anyone know if I miss some CSS setting that can fix that in Firefox?

Bedroom answered 9/1, 2012 at 14:7 Comment(3)

In firefox the green indicator div is located in the first row and it should be in the 3rd row as in chrome and IE. – Bedroom 9/1, 2012 at 14:15

Looks like you're using tables for layout. Are you? – Jenaejenda 9/1, 2012 at 14:22

unfortunalty I do. I am using jqGrid which uses tables internally. I have to position an indicator inside a cell. – Bedroom 9/1, 2012 at 14:25

the element is not a block element. add to the style display:block, you will get the needed behavior.

Flautist answered 9/1, 2012 at 14:18 Comment(4)

It indeed works now although the TD stops behaving like a table cell... I have to specify explicit height for the cell to align with the rest of the cells. – Bedroom 9/1, 2012 at 14:22

To expand, the td element's default display value is typically "table-cell" (and given Firefox's support for the "table-cell" display value, this is likely what it defaults to). – Greyback 9/1, 2012 at 14:23

Just ran into this issue - does that mean you can't positon: absolute inside a table layout? – Ashford 26/9, 2013 at 19:40

In fact, this is a Firefox bug, which has already been fixed (since version 31, Firefox will position absolute descendants relative to table cells just like other browsers do). – Toastmaster 8/7, 2014 at 9:10

A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.

Example: http://jsfiddle.net/pTJUk/

Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.

Leukocyte answered 26/9, 2013 at 20:35 Comment(1)

I was having a similar problem getting an <a> to expand over adjacent cells. Putting a <div style="position:relative;> inside the <td> got everything to work. So far I've encountered no problems across multiple browsers. – Dardanus 17/10, 2013 at 15:54

It was a very old Firefox bug that have been fixed about 13 years after being reported!

You may refer to the entertaining history here: https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Ealdorman answered 10/9, 2015 at 9:57 Comment(0)

Recommended topics

Hot tags