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

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