24

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: Notice the offset on the second column And another: Notice the offset on the second to last column

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)
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Krummelz
  • 1,046
  • 1
  • 11
  • 23
  • You should post the resulting html of the table, if it is too long, post only the resulting code of the problematic row. – Alejandro Martin Sep 01 '11 at 07:32
  • I have the same problem and want to add that every time I reload the same page it happens in a different row and column. There is nothing wrong with the html. – Johann Strydom Nov 10 '11 at 12:07
  • I'm have the same problem. I've been over the HTML of the table and there is nothing wrong with it. My table also contains form elements. I'm not sure if that is technically semantically correct. – Adam Youngers Mar 13 '12 at 18:42
  • 1
    I found this thread that contains an initial response from Microsoft that says they will look into it. No official response yet on a fix. http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 – Adam Youngers Mar 13 '12 at 18:49
  • There is supposedly a Connect ticket on this issue at https://connect.microsoft.com/IE/feedback/details/665694/ie9-skips-cells-when-rendering-large-table-with-multiple-tbody-elements-from-ajax-using-jquery but it seems to have disappeared... – Mike Jun 05 '12 at 13:54
  • possible duplicate of [internet-explorer-9-not-rendering-table-cells-properly](http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly) – Ravi Kadaboina Jan 30 '13 at 23:26

5 Answers5

24

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, '><');
Johann Strydom
  • 1,482
  • 14
  • 18
  • 3
    In case others aren't clear on how to get and update the tableHtml variable above, here is the code that worked for me: var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); var replacement = $('.cal-table').html().replace(expr, '><'); $('.cal-table').html(replacement); $('.cal-table').tableScroll({ height: 540, width: tableWidth }); – Winger Apr 23 '12 at 21:34
  • There is some further discussion of this here: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 – Mike Jun 06 '12 at 17:36
  • The solutions above worked originally, but did cover all of my cases. I kept getting spaces randomly. The solution I posted resolved my issues. – John Yeary Jan 08 '13 at 15:35
1

I used an answer from another post Remove whitespace and line breaks between HTML elements using jQuery where there was a script which was more effective than the one above. I used the answer to solve it, but I will repeat it for a complete answer.

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

Ultimately, this is only an interim solution and should be fixed in IE9/10 by Microsoft.

Community
  • 1
  • 1
John Yeary
  • 1,112
  • 22
  • 45
  • I am not sure if you did some performance testing but this solution is way overkill for large tables. – Ravi Kadaboina Jan 30 '13 at 23:25
  • 1
    I agree that it is a big performance hit on a very large table. It is a solution to the problem. A better solution would be for MS to solve the issue. – John Yeary Jan 31 '13 at 01:28
0

The solution given @Johann Strydom works but if you do not want to touch every element and just focus on the table content model.

Here is a better regex devised by my Lead at work.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

covering all table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th elements.

Ravi Kadaboina
  • 8,494
  • 3
  • 30
  • 42
0

Following Krummelz's suggestions, adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> makes the problem go away.

For my specific problem, I have a jquery datepicker and regular label that renders correctly in IE9 but after a jquery ajax call would get shifted down into the data. Putting the above tag fixes it for me. It is worth a try. Good luck.

oky_sabeni
  • 7,672
  • 15
  • 65
  • 89
0

White spacing was my issue too, though my situation was a little different. This thread helped me fix the issue (Thanks to all).

My table would be fine then randomly add a column out of nowhere after a postback. Here is my code before and after:

Before: (i have about 10 others that are formatted the same way are not causing this issue, but this one was)

<tr>
    <th class="width125px th-left-borders">
        Intangibles
    </th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox>
    </td>
</tr>

After: (removed the line breaks which are usually fine, but for some reason this was causing an issue)

<tr>
    <th class="width125px th-left-borders">Intangibles</th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td>
</tr>

Hopefully this will help someone as well.

Taylor Brown
  • 1,689
  • 2
  • 17
  • 33