Html column Displacement

Question

I have an Asp.Net Webforms application with AjaxControlToolkit that is not displaying html columns correctly on IE9.

IE9 Capture

This problem happens only sometimes, without a clear pattern of when/how. It works fine on Firefox. The resulting HTML section/table was already validated using a W3C tool and is fine. I didn't find anything in the CSSs that could explain this behavior. Also, there is no custom Javascript in this ascx file.

I suspect it's an IE9 bug, and I'm thinking about opening a ticket to Microsoft Support. We're using AjaxControlToolkit V4.1.7.1213. I have already tried to use an Asp.Net Repeater instead the ListView and deployed it in different servers (IIS7,IIS6 etc), but I've had no luck.

<asp:UpdatePanel ID="UpdatePanelConselho" ChildrenAsTriggers="false" UpdateMode="Conditional"
                                    runat="server">
                                    <ContentTemplate>
                                        <table class="CorpGrid2" cellspacing="0">
                                            <tr class="CorpGrid2Header">
                                                <td class="CorpGrid2Cell" style="width: 36px">M/F ou Cia
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 180px">Nome
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 110px">CPF / CNPJ
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 110px">Data de Nascimento ou Idade
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 150px">País de Origem
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 110px">Cidadania
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 120px">Função
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 60px">Tomador de Decisões
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 60px">OFAC-SDN
                                                </td>
                                                <td class="CorpGrid2Cell" style="width: 60px">PEP / Lynx (High Risk)
                                                </td>
                                            </tr>
                                            <asp:Repeater ID="ListViewConselho" runat="server" OnItemDataBound="ListViewConselho_ItemDataBound">
                                                <ItemTemplate>
                                                    <tr class="CorpGrid2Data">
                                                        <td class="CorpGrid2Cell">
                                                            <asp:DropDownList ID="DropDownListGenero" runat="server" onchange="definirPepLynx();" CssClass="PepLynxConselho">
                                                            </asp:DropDownList>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:HiddenField ID="HiddenFieldCodigo" runat="server" Value='<%# Eval("RegCode") %>' />
                                                            <asp:TextBox ID="TextBoxNome" runat="server" Text='<%# Eval("MemberName") %>' Width="180px"
                                                                MaxLength="255"></asp:TextBox>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:TextBox ID="TextBoxCNPJ" runat="server" Text='<%# Eval("MemberLastName") %>'
                                                                Width="110px" MaxLength="255"></asp:TextBox>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:TextBox ID="TextBoxIdade" runat="server" Text='<%# Eval("Age") %>' Width="110px"
                                                                MaxLength="50"></asp:TextBox>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:DropDownList ID="DropDownListPaisOrigem" runat="server">
                                                            </asp:DropDownList>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:TextBox ID="TextBoxCidadania" runat="server" Text='<%# Eval("Citizenship") %>'
                                                                Width="110px" MaxLength="50"></asp:TextBox>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:TextBox ID="TextBoxFuncao" runat="server" Text='<%# Eval("FunctionDescription") %>'
                                                                Width="120px" MaxLength="255"></asp:TextBox>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:DropDownList ID="DropDownListTomadorDecisao" runat="server">
                                                                <asp:ListItem Text="" Value=""></asp:ListItem>
                                                                <asp:ListItem Text="Sim" Value="S"></asp:ListItem>
                                                                <asp:ListItem Text="Não" Value="N"></asp:ListItem>
                                                            </asp:DropDownList>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:DropDownList ID="DropDownListOFAC_SDN" runat="server">
                                                                <asp:ListItem Text="" Value=""></asp:ListItem>
                                                                <asp:ListItem Text="Sim" Value="S"></asp:ListItem>
                                                                <asp:ListItem Text="Não" Value="N"></asp:ListItem>
                                                            </asp:DropDownList>
                                                        </td>
                                                        <td class="CorpGrid2Cell">
                                                            <asp:DropDownList ID="DropDownListPEP" runat="server" onchange="definirPepLynx();" CssClass="PepLynx">
                                                                <asp:ListItem Text="" Value=""></asp:ListItem>
                                                                <asp:ListItem Text="Sim" Value="S"></asp:ListItem>
                                                                <asp:ListItem Text="Não" Value="N"></asp:ListItem>
                                                            </asp:DropDownList>
                                                        </td>
                                                    </tr>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </table>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="LinkButtonAddConselho" />
                                    </Triggers>
                                </asp:UpdatePanel>

Could anyone help find out what's happenning?

This is usually caused by having a `` where you intended to have a ``. — Quentin, Jun 05 '14 at 14:41

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Seems to be a problem with extra spacing between closing and opening TD tags. This is a known bug. Try this code:

$("table").each(function(index) {
   $(this).html($(this).html().replace(/td>\s+<td/g,'td><td'));
});

Look at this: Internet Explorer 9 not rendering table cells properly

Also take a look at the IE Blog. They have a tool (that shouldn't event exist) to check the page's compatibility with IE9: http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Html column Displacement

1 Answers1