Internet Explorer Incorrectly Calculates Percentage Height for Generated Content in Td

Table row height in Internet Explorer

Instead of using the height propertiy (since its causing problems) you can use a spacer. For exampel a transparent small gif which u set the height to the amount you want too. The gif you would just do like this: <img src="./gfx/spacer.gif" style="height:14px;" />

IE display: table-cell child ignores height: 100%

Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).

To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.

How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".

I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.

---

Use margin

Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.

span 
{
    margin-left: 10%;
}

and ofcourse reset the padding of the sides:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

This "solution" is not as dynamic as with percentage padding on the table-cell itself.

Why not?

It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).

So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.

However this is not dynamic when you want to add more cells.

jsFiddle

---

Use border

Use border which its position is "reserved" before the padding is resetted.

Reserved border

span 
{
     border-bottom: 1px solid transparent;   
}

Change property that doesn't need re-calculation of position; color

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.

jsFiddle

---

I hope one of these quick fixes work for you.

I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)

why input width 100% in table-layout auto expands in IE7?

I found that applying line-height to the input helps if the input never contains long words. This may be enough for me (I can calculate correct line-height), but other solutions are welcome, as may be more suitable for others.

finally I found the solution here textarea with 100% width ignores parent element's width in IE7: adding brutal word-break:break-all; is a solution.

Problem calculating percentage for body width

The right way to calculate body width in a fluid layout:

body {
    width:100%;
    max-width:960px;
    height:100%; 
    margin:0 auto;
} 

The max-width value should be whatever your page width is, and margin does not need a page wrap.

---

Related Topics