IE8 fixed table header

Gman · 12 Jun 2010 at 15:56

Throwing this question out there as it seems to have got me stuck for now.

I'm running IE8 in Compatibility Mode.
I've got a table with a fixed header on scrolling which is working fine. However if you include say a button in a table cell which has a css hover effect i.e. to shift the background image on the button, its causing the fixed header to shift.

Anyone know a decent fix for this besides javascript/jquery ?

Pho · 12 Jun 2010 at 16:26

Can you post a linked example?

Gman · 12 Jun 2010 at 17:03

i've stuck the test html and css here:
http://walkerdesigns.co.uk/tabletest/testing.html

if you open it in IE8 and enable compatibility mode then scroll down the table untill you see the button called "testing" on the left. Hover over the button and the header on the table should move.

Pho · 12 Jun 2010 at 23:33

Hmm it doesn't seem to do it for me (it did once I think, but I wasn't really looking

).

In Firefox the table headers are clipping the scroll bar, and there seems to be a lots of HTML errors- most of them look simple to fix, i.e. missing quotes: <th scope=col> should be <th scope="col"> or not closing img tags with /> (XHTML syntax). Maybe fixing these will clear up the other errors, it usually does.

Gman · 13 Jun 2010 at 12:23

Pho said:
Hmm it doesn't seem to do it for me (it did once I think, but I wasn't really looking ).

In Firefox the table headers are clipping the scroll bar, and there seems to be a lots of HTML errors- most of them look simple to fix, i.e. missing quotes: <th scope=col> should be <th scope="col"> or not closing img tags with /> (XHTML syntax). Maybe fixing these will clear up the other errors, it usually does.

Yep ignore all the other browsers were only supporting IE8 in IE7 compatibility mode. Were in a controlled environment and the bit that needs this fixed table header is legacy code.

i've fixed the code for you but it still has the same problem in IE8 with Compatibility Come enabled.

Pho · 13 Jun 2010 at 15:33

Ah, finally got it to 'work' (break). If I shrink my browser window it does it, if it leave it full-screen it doesn't.

Solution: remove background-position from:

Code:

.TestingButtonVersion1:hover
{
	background-position: 0 -25px; 
}

If you scroll down ever so slightly from the top of the page (move the bar literally a millimetre) you can see that as you hover over the button the header moves up slightly. If you refresh the page and scroll down further it gets moved up even more (out of sight infact) which is why it disappears.

Gman · 13 Jun 2010 at 17:19

lol if you read the 1st post I that this bit of css was the problem

i'm trying to find a work around as I need to hover effect.

Gman · 13 Jun 2010 at 20:43

managed to sort it.

just needed
top: 0px;
left: 1px;

adding to the "thead tr" style

dam you microsoft