Table-cell with position relative and content absolute bug in Firefox - css

Question

I really don't know what's the problem with my code...
The cell is positioned relative and the form is positioned absolute. In every browsers it works as it should but not Firefox...
Does it have problems with table CSS?
CSS
.table { display: table; width:100%; height:100%; table-layout: fixed; }
.row { display: table-row; height: 1px; }
.cell { display: table-cell; vertical-align: middle; position: relative; }
.menu .cell { width: 33.33%; border: 1em solid #000; font-size: 1.14em;
background: #fff; background-clip: padding-box; vertical-align: top; position: relative; }
.menu .cell header { padding:.5em 1em; background-color: #383430; color: #fff; line-height: 1.2; position: relative; }
.menu .cell .content { padding:2em 1em 3em 1em;}
.menu .cell h3 { font-size: 1em; text-transform: uppercase; text-decoration: underline; font-weight:300;}
.menu .cell ul { margin: 0; padding: 0; list-style: none; }
.menu .cell li { line-height: 1.4; padding:0.25em 0; border-bottom: 1px solid #ecece6;}
.menu .cell li:last-child { border-bottom: none; margin-bottom: 0;}
.menu .like header:before { content : 'on aime !'; position: absolute; bottom: 100%; left: 1em;
text-transform: uppercase; font-size: .8em; padding: 3.5em .5em .5em .5em; border-radius: 1em 1em 0 0;
background: #dd582a url(imgs/on-aime.png) center .5em no-repeat; box-shadow: 0px 0px 2px 0 rgba(0,0,0,.5); }
.menu .favorite { position: absolute; bottom: -.75em; right: -.75em; display: block; width: 100%; overflow: hidden;}
.menu .favorite input { position: absolute; top: -30em;}
.menu .favorite label,
.menu .favorite label:before { background-color: #dd582a; height: 32px; white-space: nowrap;
float: right; color: #fff; background-image: linear-gradient(#dd582a 50%, #bd5d3b 100%); }
.menu .favorite label:hover,
.menu .favorite label:hover:before{background-image: linear-gradient(#bd5d3b 5%, #dd582a 50%); }
.menu .favorite label { text-align: center; font-size: 24px; width: 32px; display: block;
line-height: 28px; border-radius: 4px; cursor: pointer;}
.menu .favorite label:before { content: "Add to favorite"; display: block; position: absolute; right: 34px;
padding:0 8px; font-size: 14px; line-height:32px }
.menu .favorite input:checked + label { color: #e77248; background-color: #fff;background-image: linear-gradient(#ffffff 50%, #bfbfbf 100%); }
.menu .favorite input:checked + label:hover{background-image: linear-gradient(#bfbfbf 5%, #fff 50%);}
.menu .favorite input:checked + label:before { content: "Like"}
HTML
<div class="table menu">
<div class="row">
<div class="cell">
<div >
<header>100 $</header>
<div class="content">
<h3>Title 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<form class="favorite">
<input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
<label for="bal-menu2">♥</label>
</form>
</div>
</div>
<div class="cell">
<div >
<header>100 $</header>
<div class="content">
<h3>Title 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<form class="favorite">
<input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
<label for="bal-menu2">♥</label>
</form>
</div>
</div>
</div></div>
Here's a fiddle
http://jsfiddle.net/warface/8bWUe/2/
Look in firefox, you'll notice that the form "add to favorite" stack on each other but in other browser it positioned just fine.
Any clues on how to make it work has it should like in Chrome, Safari, IE8+,...?
EDIT
After some research... Firefox has this problem since 2000
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
And they don't seem to give a middle finger about it to fix it... burn in hell Firefox !

Answer 1

Here's a fix that takes the modified .cell >div {position:relative} and add height:100% to the divs.
CSS
.row { display: table-row; height:100%; }
.cell div {height:100%; position: relative }
Here's the udpated fiddle
http://jsfiddle.net/8bWUe/19/
Works on FF v22.0

Answer 2

Make
.row
{
display: block;
position:relative
}
instead of "table-row" - that should do the trick.

Answer 3

I was able to get the forms placed in firefox with the following css:
.cell > div { position: relative }