Home/ Questions/Q 8837373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T09:42:26+00:00

For some reason when I use the hover selector on a TH inside a

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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" >
    • 0