The empty space (or space) displayed between cells in the data received by ajax, submitted to the table only in IE9 browser,

Question

As the name implies, I have a table loaded from the database. At first, only 15 rows are selected. Later there is a way to display 15, 50 and 100 entries to show using the drop-down list. Which is retrieved via ajax. Some, as if I made a sampling counter of more than 59 or higher, an empty space is created between the cell in a random row. This only happens in IE9 browsers. IE version <9 is good, FireFox, Chrome, Safari are good too. This is my first question, therefore I am not allowed to post the image, so I will put some numerical forms below.

| ... 1 .. || ..2 .. || ... 3 ... || .... 4 .... || 0.5 || ..6 .. || ..7 .. |

Suppose the above is a bar, acting as a border on the right and left. What I get in IE9 ajax the extracted data is something like below

| ... 1 .. || ..2 .. || ... 3 ... || .... 4 .... || 0.5 || ..6 .. || ..7 .. |

| ..1 .. | _ _ _ | ..2 .. || ... 3 ... || .... 4 .... || .5. || ..6 .. || ..7 .. |

| ... 1 .. || ..2 .. || ... 3 ... || .... 4 .... || 0.5 || ..6 .. || ..7 .. |

| ..1 .. || ..2 .. || ... 3 ... | _ _ _ _ | .... 4 .... || .5. || ..6 .. || ..7 .. |

| ... 1 .. || ..2 .. || ... 3 ... || .... 4 .... || 0.5 || ..6 .. || ..7 .. |

You see a space (represented by an underline) in the second (after the 1st column) and fourth (after the third column) line. I have no idea, since the IE developer / debugger panel is not very helpful. The effect is not random, because I get the same empty space between cells when updating or after a clear cache. Perhaps due to the fact that the data retrieved from ajax has something to do with IE9 rendering? Has anyone encountered such a problem or a loved one. Any help would be greatly appreciated.

Answer 1

dhiraj - There seems to be no official statement on this IE9 error from MS, but I have experienced this more than once. This seems to be related to the space between the rows of the table and the cells of the source code and only occurs in the tables that appear in UpdatePanels after the ajax postback. I found a (ugly) solution to the problem.

If you use a ListView control, you will have the option to remove spaces in the table structure. Unfortunately, this makes your source code more unreadable, but it seems to fix the problem. So, for example, if your source code looked like this:

<asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <table> <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval("field1") %></td> <td><%# Eval("field2") %></td> <td><%# Eval("field3") %></td> <td><%# Eval("field4") %></td> </tr> </ItemTemplate> 

Your "fixed" code should look like this:

 <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <table><asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder></table> </LayoutTemplate> <ItemTemplate> <tr><td><%# Eval("field1") %></td><td><%# Eval("field2") %></td><td><%# Eval("field3") %></td><td><%# Eval("field4") %></td></tr> </ItemTemplate> 

Hope this helps!

Answer 2

I would like to add that I had the same problem.

Loading a table through AJAX has led to random gaps between TD elements.

The code displaying this table was:

 echo(" <tr>") echo(" <td>Column1</td>") echo(" <td>Column2</td>") echo(" <td>Column3</td>") echo(" <td>Column4</td>") echo(" <td>Column5</td>") echo(" </tr>") 

echo () is a simple wrapper for response.write.

As stated in the comments here, I just removed the space in the answer as follows:

 echo("<tr>") echo("<td>Column1</td>") echo("<td>Column2</td>") echo("<td>Column3</td>") echo("<td>Column4</td>") echo("<td>Column5</td>") echo("</tr>") 

This immediately resolved the ugly layout problem, but the table now displays sequentially. Deffo error in IE9

Answer 3

Try putting the contents of the <td> tag in the <div>

Answer 4

I had the same problem. Random separator between cells in IE9 on the update panel after postback.

Like others, they suggested removing spaces between the elements of a table cell. It's a little ugly, but it looks like it works!

from this...

 <tr class="rpt-row-alt"> <td> <%--Cell Contents --%> </td> <td> <%--Cell Contents --%> </td> <td> <%--Cell Contents --%> </td> <td> <%--Cell Contents --%> </td> <td> <%--Cell Contents --%> </td> <td> <%--Cell Contents --%> </td> </tr> 

to that...

 <tr class="rpt-row-alt"> <td> <%--Cell Contents --%> </td><td> <%--Cell Contents --%> </td><td> <%--Cell Contents --%> </td><td> <%--Cell Contents --%> </td><td> <%--Cell Contents --%> </td><td> <%--Cell Contents --%> </td> </tr> 

Solved the problem for me! This seems to be the distance between the elements of the data table, so you don't need to have the entire table row on the same markup line.