IE9 table has random rows which are offset at random columns

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

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, '><');

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.