Table header (thead) shifts left when reloaded using jQuery (IE6)

Question

I have a table made up of thead and tbody elements. I have some javascript that performs a callback to the server to filter this table. On return, this code removes the html from the table's parent element before inserting the new table html back in.

All this is working fine, except (of course) on IE6. When I do this on IE6, the table header row shifts to the left (so that it is no longer aligned with the rest of the table), until you subsequently mouse over the table body, when it pops back into place...

Anybody have an idea why this might be happening?

---

Ah, after some digging around in the CSS, I noticed that the th elements had been given position:relative. Removing this seems to fix the problem.

Answer 1

Have you tried inspecting the element with Firebug or Chrome's inspector? It sounds like there's a margin or padding issue with your CSS.

You might also be nesting the element within additional tags when reloading.

Just some ideas while we wait for the code.