1

Usually, we can set a parent element to be the context for a child's absolute positioning, as follows:

#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    left: 0;
}

This all works fine, but when the parent has its display property set to table-cell, it doesn't work in Firefox. The positioning context for the child element will be the closest positioned ancestor above its parent.

Of note, this works everywhere else. Tested in IE8, IE9, Safari, Chrome & Opera.

See the fiddle here: http://jsfiddle.net/RZ5Vx/

Also, see this fiddle with the parent's display set to inline-block, which does work in Firefox.

So, is this a bug? If so, is there anyway to work around it?

vcsjones
  • 138,677
  • 31
  • 291
  • 286
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • 1
    You can't position elements within a normal `TD` so I'd assume the browser engine isn't going to let you do it with a `table-cell` either. – DA. Jun 05 '12 at 18:38
  • @DA - But this works *everywhere* else. Is that just a lucky bug by everyone else? – Joseph Silber Jun 05 '12 at 18:39
  • You're not the first person who wants to do this, see: http://stackoverflow.com/questions/10900433/absolute-positioning-inside-a-table-cell-in-ie. Click through my links until you get to the Firefox bug report. – thirtydot Jun 07 '12 at 09:33

1 Answers1

2

A table-cell is meant to be inside a table, so:

See this working Fiddle!

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    background: #ddd;
    position: relative;
}

Note: Since you don't have a table in there, set it.

You can see this quirksmode for the The display declaration.

EDITED

From the W3C recommendation :: Tables it reads

The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; all other values of non-inheritable properties are used on the table box and not the table wrapper box. (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)

This is not a bug, is more like a status-bydesign thing! Please see this!

EDITED

To include the work around placed on the comment as requested on the question:

So, is this a bug? If so, is there anyway to work around it?

Possible work around are:

Wrap the element with a div as position:relative; See Fiddle!

#wrapper {
    position: relative;
}

Note: most practical solution!

Wrap the inner elements with a div as position:relative; See Fiddle! 

#innerWrapper {
    position: relative;
}

Note: requires some definitions from the original element to be declared on the innerWrapper!

Zuul
  • 16,217
  • 6
  • 61
  • 88
  • None of this answers the question. I specifically want the element to be displayed as `table-cell`. And nope. It does *not* have to be within a table, which doesn't even help out with this problem: http://jsfiddle.net/RZ5Vx/3/ – Joseph Silber Jun 05 '12 at 18:35
  • Go around the issue and set the relative position to the [table](http://jsfiddle.net/zuul/RZ5Vx/4/) or wrap your table-cell [with a div](http://jsfiddle.net/zuul/RZ5Vx/5/) set to position:relative. – Zuul Jun 05 '12 at 18:42
  • I only provided the test case. In the real world, I need several adjacent element to fill up the available width, and then have something positioned inside them. I obviously can only do that on the `table-cell` element itself. – Joseph Silber Jun 05 '12 at 18:46
  • @Joseph Silber, edited the answer with official documentation on the subject. Sorry if this does not go according to your goal, but it is as it is. – Zuul Jun 05 '12 at 18:47
  • @Joseph Silber, I can add that I've been frustrated with this issue in the past, and I've provided an answer fast enough due to previous reading to deal with the subject, having concluded that a `table-cell` is by definition relative to the parent `table` thus being necessary a wrapper to overcome this type of problem. – Zuul Jun 05 '12 at 19:02
  • Thanks! I used `position: relative` on the child element, and it works flawlessly cross browser. I didn't even have to add a superfluous element; I was dealing with a horizontal navbar - which consists of a list of links - with `display: table-cell` on the `li`s. All I did was move `position: relative` from the `li`s to the child `a`s! It's such a simple solution, I'm ashamed I didn't think of it myself. – Joseph Silber Jun 08 '12 at 01:33