Strange IE 7 behavior in an absolute table header with fixed widths

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

score 2 · Accepted Answer · answered Jul 02 '12 at 14:31

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)

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

score 1 · Answer 2 · answered Jul 01 '12 at 20:22

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.

answered Jul 01 '12 at 20:22

Praveen Kumar Purushothaman

164,888
24
203
252

It doesn't do anything at all on my end. Could you provide an example? You can use [mine as a base](http://jsfiddle.net/6T3h4/). – ShadowScripter Jul 01 '12 at 20:26
No, it's still misbehaving :/ – ShadowScripter Jul 01 '12 at 20:29
http://jsfiddle.net/6T3h4/5/ This one? I am trying to check, but not sure becoz I have IE 9 and I use IE 7 mode to check. Not sure if I can trust it! – Praveen Kumar Purushothaman Jul 01 '12 at 20:31
Still no. Can't you debug on your end? All these comments... :P – ShadowScripter Jul 01 '12 at 20:33
Er... I want you to debug, coz I said na, I have IE 9. Can't trust if its emulator is pure IE 7, as it is working! :P – Praveen Kumar Purushothaman Jul 01 '12 at 20:33
Are you debugging by setting both the web and document mode to IE7? Because that's what I'm doing :P – ShadowScripter Jul 01 '12 at 20:35
1

One thing about IE is true. It rules the corporate world, which use Windows as the main OS. Lets pray that IE dies. Else, you can give a note saying that `Sorry! Please upgrade at least to IE 8 for a supported basic UX!` – Praveen Kumar Purushothaman Jul 01 '12 at 20:38

Strange IE 7 behavior in an absolute table header with fixed widths

2 Answers2