gridview freeze header unfreezing on img class change

[tekkerguy]

I have a gridview where I'm freezing the header row using
this.offsetParent.scrollTop-1. which is working.

However, in the gridview tablerows, I have an img tag, with a class, where the background image is an i. the img tag has a mouseover/mouseout events set to change the class, which in turn changes the i image.

Whenever the mouseover/mouseout is fired, it changes the image, however the header is unfrozen and appears where it would have been, had it not been frozen, and is then refrozen at that spot.

Any ideas as to why this is happening and how to stop it?

 

[BabyJeffy]

Maybe a look at the code that is causing the problem would help. Without seeing the code, I would say that the problem may be down to the use of tables (known for all kinds of problems when mixed with some css rules).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[tekkerguy]

I'll post what I can in a moment, but it also seems that if I scroll the main window scrollbar, not the div scroll, the headers move with that as well (or rather stay still while the whole screen scrolls)

 

[tekkerguy]

here's the table

   <div id="containingDivid" class="contdivclass" style="height: 200px; overflow-x: hidden; overflow-y: auto">
        <div id="Panelid" style="height:217px;">
	
            <div>
		<table class="ContentTable" cellspacing="0" cellpadding="0" rules="all" border="0" id="gridviewid" style="border-width:0px;width:100%;border-collapse:collapse;">
			<thead>
				<tr class="ColumnHeader">
					<th align="left" scope="col" style="width:15%;">headerCell</th>
          <th class="class" align="left" scope="col">headerCell</th>
          <th scope="col">&nbsp;</th>
          <th align="left" scope="col">headerCell</th>
          <th class="class" scope="col" style="width:20%;">headerCell</th>
          <th class="class" scope="col" style="width:18%;">headerCell</th>
				</tr>
			</thead><tbody>
				<tr class="Even">
					<td align="left">bodyCell</td>
          <td class="MoreInfo" align="left">bodyCell</td>
          <td><img src="img/blnk.gif" id="imgid" class="InformationOut" onmouseover="this.className='InformationOver'" onmouseout="if(tooltip.target!=this)this.className='InformationOut'" alt="Quick Preview" onclick="tooltip.show(this,null,650,285,340,250,'pagename','title');" /></td>
          <td align="left"></td>
          <td class="Right"></td>
          <td class="Right MoreInfo"></td>
				</tr><tr class="Odd">
				</tbody>
		</table>
		</div>
		</div>
    </div>

and this is the style in the header

		   <style type="text/css">
	.ContentTable thead tr
	{
    position:relative;
    top:expression(this.parentElement.parentElement.parentElement.scrollTop-2);
    }
    <style>