22

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)

In the following example, the padding on the right table cell disappears when you hover over it in IE11: http://jsfiddle.net/xx4Z4/

This seems to arise because of an incredibly specific CSS scenario:

  • The element uses display: table-cell
  • The element uses percentage-based padding, e.g., padding: 0 5%
  • A subelement adds text-decoration: underline when the parent element is hovered over

If you change any of those three things, the problem goes away.

This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?

4
  • Whay are you using display: table;?
    – user1633525
    Commented Nov 27, 2013 at 19:25
  • 1
    On the outermost element? As far as I understand it, it's best practice to wrap table-cells in tables. Regardless, the bug still exists whether or not the cells are wrapped in a table.
    – Michael
    Commented Nov 27, 2013 at 19:31
  • 2
    I am facing this exact same issue. Table-cell inside of a table. Padding is in percentages. Page loads, layout is fine. Hover over the link inside the table cell, and the left padding "disappears". Like OP IE11 is showing 0 padding in the box model. All other browsers work fine. Another bang up job by MS implementing the box-model. Commented Apr 7, 2014 at 15:34
  • it also seems to happen when the subelement changes color, not only when it's underlined
    – noinstance
    Commented Oct 14, 2015 at 19:23

6 Answers 6

15

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 :)

4
  • Glad i could help. And thanks for your question, was very interesting :)
    – nkmol
    Commented Dec 2, 2013 at 19:13
  • 3
    Another solution is to use media queries to target IE10/11. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } Link: limecanvas.com/css-hacks-targeting-ie-10 Commented Apr 7, 2014 at 19:27
  • Nice fix! I used a combination of @jkinz media queries trick, and your margin trick. Thanks also for the tip about multiplying the padding pct by the number of cells to find the new margin value. Commented Sep 19, 2014 at 18:46
  • It is good to use :active, :focus, :hover instead of just :hover and you should also apply them to the element itself. In your case the padding will still change when the element (not the parent) is hovered or focused. Actually the outline which the browser applies on focus by default also causes the change of padding so something should be done about it too...
    – tomasz86
    Commented Apr 25, 2016 at 7:08
4

Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>
1
  • This answer saved my life. Actually in my case, fixed table-layout is not good, but until everything is loaded, i leave it there. After that I remove it with js, and voila, the layout is not broken
    – Seer
    Commented Aug 25, 2016 at 13:03
1

Adding invisible top and bottom borders seems to fix the problem.

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

This prevents the anchors from moving on hover or focus.

I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.

1
  • The outline method did not work in all circumstances but I have found a better one and updated the answer accordingly.
    – tomasz86
    Commented Jul 6, 2016 at 15:51
0

We had a similar scenario where none of the solutions above worked.

Instead we animate the width of our affected div after the page has loaded:

if (!!navigator.userAgent.match(/Trident\/7\./)){
            $("#karina-rosner2").animate({'width': '20.1%'},1);     
            $("#karina-rosner2").animate({'width': '20%'},1);   
}

This forces IE11 to recalculate the div's relative padding value and solved our problem well.

0
0

This can be "helpfully" solved by setting the paddding css-rules like this ->

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Rememeber to set this only for IE since it can make all normal browser behave like a disco.

EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.

0

These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell

What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.

Here is my simplified HTML:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

And here is the CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements

Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.