Question

I have a page of categories, when the user clicks one, the items under that category are loaded via a jQuery Ajax call, in a table, and stuck into an element just below the category. What seems to happen though, is that one or two rows in the loaded table, will have its data offset at a random column. I have tested this in IE9, FF 3.6, and Chrome 13. This ONLY seems to happen in IE9. The tabular data is perfectly formatted – I have used Fiddler to intercept the requests and then looked at the raw html, and there’s nothing wrong with it.

The site was built in ASP.NET MVC3. The table that is returned via the Ajax request returns a Razor partial view. This has to work in IE, unfortunately. I’m really hoping someone has an explanation for this.

Here’s one example:

And another:

EDIT [2012/03/25]: This application has left my hands, so I am unable to verify which of the answers work. The link that Adam Youngers posted to http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 seemed to have some possible solutions. From past experience, I would try these options first..

1. Adding <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> to the head element of the page.
2. Attempt to remove any white-space between table cells. Eg. “</td><td>”, instead of having the next cell start on a new line. (This has caused strange spacing issues for me in the past)

Answer 1

The problem seems to be with white spacing.

I found this answer on http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90

Replace the html you get from the AJAX call using a regular expression like this.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
tableHtml = tableHtml.replace(expr, '><');