Firefox vs Chrome: Background overlay is incorrectly sized with display:table-cell

Question

I have a block of HTML/CSS that behaves differently in Firefox (22.0) and Chrome (28.0.1500.71). I'm trying to figure out why. I have created a jsfiddle so that the resulting output can be easily observed. http://jsfiddle.net/treejanitor/Q8zn4/3/

The source below is attempting to overlay a simple background color upon a table cell with a set of div elements nested under a div with display: table. Only the table cell which is marked with the playbtn class should have the overlay.

It appears that the table-cell CSS is problematic to Firefox when determining box model dimensions. For some reason, the top/bottom/left/right CSS attributes are incorrectly using the outermost block, the tbl class' <div>. This doesn't seem to be an issue with Chrome, Safari, IE9+.

When I changed the CSS display value from table-cell to inline-block, I believe I got the behavior I desired but I did not pursue it much further; I need the display: table-cell in order to properly managed a more complex table display including spacing between the table cells evenly distributed.

Anyone have any ideas?

HTML

<div class="tbl">
    <div>
        <div>
            <img src="http://placekitten.com/200/240" />
            <div class="playbtn"></div>
        </div>
        <div>Description</div>
    </div>
    <div>
        <div>
            <img src="http://placekitten.com/200/240" />
            <div class="playbtn"></div>
        </div>
        <div>Description</div>
    </div>
</div>

CSS

.tbl {
    display: table;
}
.tbl > div {
    display: table-row;
}
.tbl > div > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}
div.playbtn {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: blue;
    background-size: 100%;
    opacity: 0.3;
}

Take a look at http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements for some more details and possible solutions. — kalley, Jul 24 '13 at 18:40
Hmm, seems similar to this issue - hopefully not duplicating it. http://stackoverflow.com/questions/16571910/firefox-cant-handle-absolute-positioning-within-displaytable-cell?rq=1 — treejanitor, Jul 24 '13 at 18:46
@kalley - I have a definite lead from the link you suggested. Wrapping the contents of the cell with a `div` having a `position:relative` is getting me very close. — treejanitor, Jul 24 '13 at 19:02

insertusernamehere · Accepted Answer · 2013-07-24T19:07:57.623

3

The CSS 2.1 specification "9.3.1 Choosing a positioning scheme: 'position' property" says:

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.

So even if all other browsers use the value relative as "expected", Firefox is not wrong ignoring it.

Edit

I think wrapping the content into another <div> with position: relative; would be the easiest solution:

HTML

<div class="cell">
    <div class="relative">
        <img src="http://placekitten.com/200/240" />
        <div class="overlay"></div>
    </div>
</div>

CSS

div.cell {
    display: table-cell;
}

div.relative {
    position: relative;
    line-height: 0;
}

div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid red;
}

Demo

Try before buy

edited Jul 24 '13 at 19:07

answered Jul 24 '13 at 18:38

insertusernamehere

23,204
9
87
126

Yes, I guess I had a hunch that it was a gray area from the link I had posted above. I'm mostly looking for a practical solution if there is one, irrespective of the spec. Thanks for the quick reply to confirm my suspicions on the exact specification. – treejanitor Jul 24 '13 at 19:05
@treejanitor I've updated my answer with a solution using a wrapper - like in the answer kalley linked in his comment. – insertusernamehere Jul 24 '13 at 19:09
1

perfect! I just came to same answer, using your line-height as my final tweak. My fiddle of the original with the changes is here. http://jsfiddle.net/treejanitor/Q8zn4/4/ I will mark this answer correct. – treejanitor Jul 24 '13 at 19:14
Pretty nice result. I'm glad I could throw in my two cents here and it helped in the end. :) – insertusernamehere Jul 24 '13 at 19:16
I had weird rendering issue in Chrome like color not updated... by removing the `position: relative` on td it fixed those unexpected behaviors – JBE Oct 14 '15 at 21:55

Firefox vs Chrome: Background overlay is incorrectly sized with display:table-cell

1 Answers1