Menu
IE11 is calculating the height of a table cell as the height of its content (20px) and not as the height of its background (100px).
Other browsers work as expected.
How can I fix that in IE?
Or: what am I doing wrong?
Or: how can I work around that?
I need this so I can draw a vertical line behind a table cell.
Some work-arounds are not possible, due to the details of my particular problem.
The height is not constant, it depends on the amount of text on another cell.
So I cannot use a fixed line-height either. If I could, I could also just put that fixed size as ::before's height.
I cannot work around that by using a repeating background-image because the line is supposed to not be drawn behind an icon that is centred, so I am drawing it by using generated content (::before and ::after) with height: calc(50% - 20px);.
Try opening the online sample in IE11, and in Firefox or Chrome.
Note that JavaScript shows the first cell to be 100px tall, and the background fills the 100px. But the generated content is only ~20px tall...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#borked {
background: yellow;
position: relative;
height: 100%;
}
#borked~* {
height: 100px;
}
#borked::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>
<table>
<tr><td id="borked">abc</td><td>def</td></tr>
</table>
</body>
<script type="text/javascript">
"use strict";
var borked = document.getElementById("borked");
var c = document.createElement("td");
c.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(c);
</script>
</html>
361
Internet Explorer content height is related to closest element with height set in absolute units, such as pixels. If you want to use % height, you need to set the height on all parent elements, this will be html, body, table ....
Cause this is not possible for you, use this trick to meets your requirements.
"use strict";
var borked = document.getElementById("borked");
var td = document.createElement("td");
td.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(td);#borked {
background: yellow;
position: relative;
height: 100%;
overflow: hidden;
}
#borked~* {
height: 100px;
}
#borked::before {
content: "";
position: absolute;
top: 0;
width: 100%;
margin: -99999em;
padding: 99999em;
background-color: rgba(0, 255, 0, 0.3);
}<table>
<tr><td id="borked">abc</td><td>def</td></tr>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
