IE loses css styles after table rows are appended with javascript

Question

I have a problem where i am doing an ajax fetch of some table rows which i use to replace a table's body.

The problem is that sometimes IE(6/7) decides to forget about all page styles after such an append. (that is to say, it reverts to using styles in css includes at the top of the page, but not styles defined on the page itself)

I have been able to find other people describing the same problem, but no solution. has anyone encountered this before, and was able to solve it?

bonus points if the solution did not involve externalizing all css on the page.

Answer 1

Well, if you mean that you have style tags in the body, they shouldn't really be there, so it's not surprising that some browsers may react badly to that.

If you are replacing all rows in a table, try to replace the entire table instead. The structure of a table isn't really meant to be changed that drastically, so replacing the entire table may very well cause a less aggressive reflow of the page. That may keep it from removing the questionable style tags in the code.

Verify that the code that you are putting in the page is valid. If you introduce invalid HTML code, that may force the browser to change rendering mode. That in turn would require a complete reexamination of the code, which could be a possible explanation why it's throwing away inline style tags.

Instead of a table you could try using div tags that you arrange to form the layout that you want. Replacing some div elements may cause less confusion to the browser than replacing a table or part of a table, which may make the page more stable.

If all that fails, I don't really see any other solution than making the page more robust by not putting style tags in the body. That's something that you should consider in the long run anyway.