1

I've discovered an interesting layout issue seemingly present only in Firefox.

Elements with display:table-cell; fail to serve as the positional parent for descendants with position:absolute;.

That is, I've been surprised to learn that Firefox has issues absolutely positioning a little icon critter into the corner of a table-cell'd element like the other browsers.

    jsFiddle Demonstration

Desired Result (Chrome):

chrome perfect output

Firefox Result:

firefox problematic output

Interestingly, even IE8 produces the desired result.
  What's your favorite workaround?

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
  • when in doubt, google it out.. http://stackoverflow.com/questions/5004941/css-table-table-cell-height-issue-in-firefox – THE AMAZING Aug 24 '13 at 03:25
  • @user2712605: *seems* totally unrelated. – ChaseMoskal Aug 24 '13 at 03:26
  • Yeah that question is totally unrelated. Here are some actually related questions: [1](http://stackoverflow.com/questions/7629326/position-relative-in-firefox), [2](http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements). Here's the massive Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=63895. It's a bit of a running joke at this point... – thirtydot Aug 24 '13 at 14:59

2 Answers2

0

So far, I've found the lame-and-obvious solution.

The desired result can be achieved in Firefox by adding a lame wrapper <div> with display:block; and position:relative applied within the table-cell.

Wrapper Solution jsFiddle

Hoping somebody can find a solution that doesn't require me to meddle with the DOM just for Firefox.

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
0

The CSS spec clearly states:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Being undefined, Firefox will just ignore your position-relative. Thus your .container becomes the nearest positioned ancestor and is used for the absolutely-positioned .icon elements.

So, as it turns out that both implementations, Firefox and Chrome, are right/wrong the same. You simply cannot rely on undefined behavior. In the end, you need to use that wrapper you seem to dread to be spec- and browser-compatible.

nmaier
  • 32,336
  • 5
  • 63
  • 78