Why does the div with scroll resizes on hover for TH

Question

For some reason when I use the hover selector on a TH inside a div with a scroll, the parent div resizes. Every time the mouse over effect is triggered the div grows by one line.

I tested this in other browsers but I can only reproduce this in IE 9. Anyone have a way to resolve this?

<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />
<style>
    .testScroller {
        max-width: 200px;
        overflow-x: auto;
        background-color: green;
    }
    .testHeader:hover { 
        background-color: lightBlue;
    }
</style>
</head>
<body>
    <div class="testScroller">
        <table >
            <tr >
                <th class="testHeader">header 0</th>
                <th class="testHeader">header 1</th>
                <th class="testHeader">header 2</th>
                <th class="testHeader">header 3</th>
                <th class="testHeader">header 4</th>
                <th class="testHeader">header 5 </th>
            </tr>
            <tr >
                <td >0</td>
                <td >1</td>
                <td >2</td>
                <td >3</td>
                <td >4</td>
                <td >5</td>
            </tr>
        </table>
    </div>
</body>
</html>

score 4 · Answer 1 · answered Feb 08 '13 at 09:51

4

You should add:

.testScroller {
    overflow-x: auto;
    min-height:0%   /* IE9 fix */
}

See this link for details

http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround

answered Feb 08 '13 at 09:51

Jo VdB

2,016
18
16

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

That's almost beautiful in it's bugginess! However, if you change your style to this, it should fix the problem :

.testScroller {
    max-width: 200px;
    overflow-x: auto;
    background-color: green;
}
.testHeader {
    background-color: green;
}
.testHeader:hover { 
    background-color: lightBlue;
}

As evidenced by the comments, this is far more complicated than the simple fix belies. This appears to have something to do with IE9 having broken something - this works ok in IE8.

Check out this question : Force IE9 to emulate IE8. Possible?

Which will lead you to changing your meta tag to this :

<meta http-equiv="X-UA-Compatible" content="IE=8" >

edited May 23 '17 at 11:43

Community

1
1

answered Nov 15 '12 at 16:47

adhocgeek

1,437
1
16
30

My actual CSS is more complex. That CSS I posted was the simplest code I could use to reporduce the issue. .testScroller { max-width: 200px; overflow-x: auto; background-color: green; } .testHeader { text-align: center; cursor: pointer; color: White; background-color: green; } .testHeader:hover { text-align: center; cursor: pointer; background-color: lightBlue; color: #1d5987; } – JohnELaw Nov 15 '12 at 16:58
Hm. It's obviously more complex than I thought. What I've written will work but only if you don't try to set any other properties in the hover style. The issue is, as someone else mentioned, caused by the max-width and overflow-x properties which IE 9 doesn't support fully. If you can redesign your CSS without them that may well be a better solution. – adhocgeek Nov 15 '12 at 17:23
This seems to be caused by some kind of measuring function gone wrong. If you can set a fixed height for your table that will also make the issue go away. – adhocgeek Nov 15 '12 at 17:27
I believe the person who said max-width and overflow-x is incorrect. I looked in to it and they both are fully supported. That is probably why the comment was removed. – JohnELaw Nov 15 '12 at 17:50
The number of row in my application changes. so i do not have a fixed height – JohnELaw Nov 15 '12 at 17:59
Hm. Even replacing the max-width and overflow-x with width and overflow still causes the bug, surprisingly. Adding *any* extra property to the hover style causes it to happen...very weird bug, possibly easier to design around than try to find a fix for. – adhocgeek Nov 15 '12 at 18:07

JohnELaw · Answer 3 · 2012-11-15T19:59:35.780

1

Taking adhocgeek suggestion of using a set height I did this. Gave ID to the object and ran this JQuery on load. Feels hacky but it works for now. I needed to add in the 30 to give space for the scroll bar.

$("#testScroller").height($("#testTable").height() + 30);

Also whatever is causing this has been resolved in IE10.

If you set the height to itself the problem is fixed

$("#testScroller").height(($("#testScroller").height()))

edited Nov 15 '12 at 19:59

answered Nov 15 '12 at 18:20

JohnELaw

43
8

I also found out if I set the height to the current height on load the problem is resolved. $("#testScroller").height(($("#testScroller").height())); – JohnELaw Nov 15 '12 at 19:51

score 1 · Answer 4 · answered Nov 06 '18 at 12:31

1

I had this resizing on hover problem with IE 11. To solve it, I changed overflow: scroll; to overflow-y: scroll;, then it worked. The reason is IE 11 doesn't support the two value overflow shorthand.

answered Nov 06 '18 at 12:31

Ada Ge

71
1
5

Why does the div with scroll resizes on hover for TH

4 Answers4