Empty space (or white space) shown in between cells in ajax fetched data fed to table in IE9 browser only,

Question

As the title suggest, I have a table which is loaded from database. First only 15 rows are fetched. Later there is way to make it show 15 , 50 and 100 records to show using dropdown list. Which is fetched via ajax. Some how if I make the fetch record count more than 59 or above, empty space is created in between cell at random row. It happens only in IE9 browsers. IE Browsers version< 9 are good, FireFox, Chrome, Safari are good as well. This is my first question so I'm not allowed to post image, so I'll put some numeric forms below.

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

Let's assume the above is a row,the bar acting as border right and left. What I get in IE9 ajax fetched data is something like below

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

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

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

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

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

You see the space (represented by _ 'underscore') in the 2nd ( after 1st column)and 4th (after 3rd column) row. I am not getting any idea, as the IE developer/debugger toolbar isn't helping much. The effect is not random as I get the same empty space between cell on refresh or after clear cache. Might it be due to ajax fetched data has something to do with IE9 rendering it? Did anyone face any such problem or a close one. Any help would be appreciated.

Answer 1

dhiraj - There does not seem to be any official statement about this IE9 bug from MS but I have experienced it on more than one occasion. It seems to be related to the whitespace between table rows and cells in the source code and only happens on tables that are rendered in UpdatePanels after an ajax postback. I have found an (ugly) fix for the problem.

If you use a ListView control, you will have the ability to remove the whitespace in your table structure. Unfortunately it makes your source code more unreadable, but it does seem to fix the problem. So, for example, if your original 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 would need to 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'd just like to add that i had the exact same problem.

Loading a table in via AJAX resulted in random gaps between TD elements.

Code that rendered 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() being a simple wrapper for response.write.

As suggested in the comments here, i simply removed the white space on the response 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 solved the problem, ugly markup but table now renders consistently. Deffo a bug in IE9

Answer 3

Try to place the contents of the tag <td> in tag <div>

Answer 4

I had the same problem. Random spacer between cells in IE9 in an update panel after a postback.

Like others have suggested, remove the spaces between the table cell elements. It's a little ugly but it does seem to work!

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 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>

Solved the problem for me! It only seems to be the spacing between the Table Data elements so you don't have to have the whole table row on one line of mark up.