1

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 enter image description here

ShadowScripter
  • 7,314
  • 4
  • 36
  • 54

2 Answers2

2

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)

skip405
  • 6,119
  • 2
  • 25
  • 28
  • Good answer. I had also considered just hiding the border with the starhack, but was hoping for better. I just wish IE could play nice at least once when I do these projects. I'll accept your answer because you solved the main issue. – ShadowScripter Jul 02 '12 at 16:50
1

just add this code:

table.list thead tr {*position: relative;} /* For IE 7 */

Finding a way to work on the tfoot but not working.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252