HTML table not rendering correctly in IE9

Question

Really weird one, this.

I'm using an asp:Repeater to create an HTML table, like so:

Markup:

<asp:Repeater ID="myRpt" runat="server">
    <HeaderTemplate>
        <table id="myGrd" border="0" style="cursor:pointer;width:100%;  background-color:white;" cellpadding="2" cellspacing="0">
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr onclick="criteria.rowClicked(this);">
            <td style="border:solid 1px black;">
                <asp:Literal ID="lblName" runat="server"></asp:Literal>
            </td>
            <td style="border:solid 1px black;width:200px;">
                <asp:Literal ID="lblRange" runat="server"></asp:Literal>
            </td>

            <td style="display:none;" >
                <asp:Literal ID="lblMisc" runat="server"></asp:Literal>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody> </table>
    </FooterTemplate>
</asp:Repeater>

VB:

    Public Sub populateGrid(ByVal ds As DataSet)
        'ds is just made from a simple select query
        myRpt.DataSource = ds
        myRpt.DataBind()
    End Sub

 Private Sub myRpt_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles myRpt.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim lblName As Literal = e.Item.FindControl("lblName")
            Dim lblRange As Literal = e.Item.FindControl("lblRange")
            Dim lblMisc As Literal = e.Item.FindControl("lblMisc")

            lblName.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Name")) & "</font>"
            lblRange.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Range")) & "</font>"
            lblMisc.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Miscellaneous")) & "</font>"
        End If
    End Sub

This displays fine in Firefox and Chrome, and most of the time in IE. However sometimes for larger tables (50+ rows) IE behaves strangely. It appears to add a blank cell...

...but there's nothing in the HTML- I've checked using the developer tools. The incorrect row has identical markup to the correct rows, except for the cell text. Whatsmore, if I delete the incorrect row, the one above it starts displaying wrong instead.

Please can someone suggest why on earth IE is rendering it like this, and what I can do to stop it.

Answer 1

This seems to be a known bug with IE9 on rendering large tables. The problem was resolved when removing white space between table def opening and closing tags eg. </td><td>

MSDN discussion on IE 9 rendering