IE: Incredible Jumping Table Title

Disclaimer: As the title says, it is for Internet Explorer only ... It's a perk for inner development - it makes life easier when dealing with things like this.

Disclaimer 2: I can reproduce this in IE7 and IE6. I have not tried IE8 as it is not available to us in our corporate environment.

My goal is to create a table where the content scrolls when the THEAD is saved. There are many different ways to do this; you can see my approach at the bottom of this post. Unfortunately I have no place to publicly post this example, but you can copy and paste it here to check it out: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

So, if you scroll down the table and hover your mouse over the first cell of the table, you will see the phenomena I'm talking about: the title bar jumps up!

Here is where he enjoys. The table is processed by a third party ASP.NET control. Therefore, I cannot change the HTML that is emitted; CSS only. Using the IE7 developer toolbar, I can tell that the class of the control changes when I hover over it (a new class is added to it). Oddly enough, the toolbar does n't show any onmouseover or onmouseleave events in the header, just something calls _events and control, which are both [Object]. The source also doesn't show anything useful.

So my goal is to prevent this line from going to the title line using only CSS. Is it possible? And if it is possible, can it be done without CSS expressions (which I am desperately trying to avoid)?

Here is an example HTML that emulates what I see.

Paste here to test: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style type = "text / css">
.ScrollContainer
{
    overflow-y: auto! important;
    overflow-x: hidden! important;
    margin: 0 auto;
    width: 100%! important;
    max-height: 275px;
    border-bottom: solid 1px # 009DD9;
}

.ScrollContainer .MasterTable
{
    width: auto! important;
}

.ScrollContainer table
{
    table-layout: fixed;    
}

.ScrollContainer .GridHeader
{
    position: relative;
    top: 0px;
    border-top: solid 1px # 009DD9;
    border-right: solid 1px # 009DD9;
    border-bottom: solid 1px # 009DD9;
    border-left: solid 1px # 009DD9;
    background: #cccccc;
}

#Spacer
{
    height: 350px;
}

.GridHeader
{
    height: 30px! important;
}

</style>
</head>
<body>
<div id = "Spacer"> </div>
<div class = "ScrollContainer">
<div class = "Dummy">
<div class = "Grid">
<table class = "MasterTable">
<colgroup>
<col /> <col /> <col /> <col /> <col /> <col />
</colgroup>
<thead> <tr>
<th class = "GridHeader" onMouseEnter = "this.className = this.className + 'GridOver';" onMouseLeave = "this.className = this.className.replace ('GridOver', '');" > <a href="#" style="GridLink"> Column 1 </a> </th>
<th class = "GridHeader"> <a href="#" style="GridLink"> Column 2 </a> </th>
<th class = "GridHeader"> <a href="#" style="GridLink"> Column 3 </a> </th>
<th class = "GridHeader"> <a href="#" style="GridLink"> Column 4 </a> </th>
<th class = "GridHeader"> <a href="#" style="GridLink"> Column 5 </a> </th>
<th class = "GridHeader"> <a href="#" style="GridLink"> Column 6 </a> </th> </tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td> <td> F </ td > </tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>