Question

Once again, I’m at a loss with IE7 on this one.

I’m making a fixed header scrollable body table based almost entirely on CSS (horizontal scroll still needs javascript to work). It is a modified version based off of this one. It looks good in the browsers I’ve checked: Chrome, Firefox and IE8+. However, in IE7 (and probably lower) the header misbehaves, like the naughty black sheep it is, and I can’t figure out why.

Any fixes / improvements / suggestions / alterations are appreciated and encouraged. 🙂
(I was going for a windows-esque look)

Here’s a live jsFiddle

Here’s a comparison pic between Firefox and IE7

Answer 1

I would suggest an alternative look for IE7 🙂

First of all – I see that you’ve got the word operation in the third column hidden everywhere except IE – that’s where the problem starts. IE doesn’t apply the height: inherit declaration on the div. Setting it to 22px did the trick – at least it doesn’t break the layout. See here – http://fiddle.jshell.net/6T3h4/6/

But the problem remains with the border… my advise is to delete the border only for ie7 using the *border: 0; which will be ignored by everyone else.

As a result – at least you will have a much better visual presentation compared to your current one))) see here: http://fiddle.jshell.net/6T3h4/7/ (in this example I simply deleted the border to save time – so it disappears everywhere in all browsers. Use *border: 0; instead, if you want to)

It is partially a solution, I would recommend to use it only if you don’t manage to find out why IE misplaces the elements in thead. So to say, as a last resort, but not as a way to do all the time 😉 If I have some more time, I’ll see into this problem, but I’m not sure I need to)