powerbuoy powerbuoy - 2 years ago 93
HTML Question

Absolutely positioned pseudo element inside table cell does not cover parent in IE9/10

I have a nested div setup displayed as table and table-cell, where each cell has an absolutely positioned

element that covers the entire cell. This works fine everywhere except in IE9, 10 and 11 where the before element only covers the content part of the cell.

div.wrap {
display: table;

div.wrap > div {
background: green;
display: table-cell;
position: relative;

div.wrap > div:before {
background: red;
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

div.wrap > div > * {
position: relative; /* render on top of overlay */

<div class="wrap">
Content number 1
Content number 2
With more content

Anyone know if this can be fixed?

Answer Source

The way I ended up solving it was to simply give the :before element a ridiculous min-height (in my case 2000px but depends on your use case) along with overflow: hidden on the table-cell.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download