I'm working on a business application using ASP.Net MVC 3 that loads huge tables of data using jquery and ajax each table can possibly contain thousands of rows. This all works great in Firefox, Chrome, Opera, Safari and IE 7/8.
My tables always end up looking like the following:
It's really frustrating not being able to support the newest version of IE in my application does anyone know a workaround or will I have to force users that have updated to IE9 to browse in compatibility mode?
- Edited by Sl0vi Wednesday, April 27, 2011 8:45 PM typos
I've raised a ticket on this on connect:
- Marked as answer by Yanping WangMicrosoft contingent staff, Moderator Tuesday, May 03, 2011 7:04 AM
Try the latest version of jQuery... 1.5.2...
One frustrating issue I have come across in working with large data sets is first differences...check that your numeric fields are the precision that you require... viz.. currency fields are to the precision of the currency.... eg... you may have values that range from 10^12 to 10^-12, so for USD you would round to 10^-2, JPY and Lira to 0 decimal places. You have to do the rounding in your data rows, not in the output. Although with the limited information you provided this does not seem to be the root problem... Another guess would be your server's international settings... the sample data looks like it has been formatted to different locales.
Definately there are issues with earlier versions of jQuery... the version of which you did not provide.... a link to your web site or a reproducable test case would be most helpful.
I'm using jquery 1.5.2 the application is developed in ASP.MVC 3 with Razor altho it really doesn't seem to matter since the problem isn't server side. And there are no problems with formatting I don't use datasets and I format all my data before displaying it.
I'm running Windows 7 64bit with IE9, a colleague of mine is running Windows 7 32bit with IE9 and is having the same problem.
The problem is very easy to recreate just make an ajax call for a partial view with a large table containing multiple tbody elements.
I can't show you my business application but I have recreated the problem in a small test application that I have hosted on my site:
You may have to scroll down a bit before you see a row with the error.
The weird thing is that it seems to be completely random which rows are rendered wrong but when reloading the exact same data it's always the same rows that have the problem.
Thanks for the list to the sample page.... I do not work for MS, so it is inconvenient to create our own mashups from your descriptions.... the sample says it all..
The issue seems to be with tbody (as you suspect)
and there are a number of outstanding tickets on connect about this...
"edit: I've worked around the problem for now by adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the head element, if the application detects that the user is using IE9"
I am guessing, but other things you may try are
adding a content type meta tag... see http://www.w3.org/International/O-charset (I know that html5 does not require this, but you will see an explanation at the w3c doco above).... when I inspect the innerHTML of the table rows that are squiff... there seems to be additional white space
<TBODY id="type1_15"> <TR> <TD>blpzflø3b4egde6c </TD> <TD> qi,,65zæ,177qf </TD> <TD> 71,0258090035179 </TD> <TD> 25,3186194670008 </TD> <TD> 62,2167479070913 </TD></TR></TBODY> <TBODY id="type1_type2_15"> <TR> <TD> 5706 </TD> <TD> hmuok4 </TD> <TD> 6,68013634471229 </TD> <TD> 4,86653028282641 </TD> <TD> 16,0487857847702 </TD></TR> <TR> <TD> 8118 </TD> <TD> q.xnwcnx6vlal9dt </TD> <TD> 19,1544108256485 </TD> <TD> 3,51558092027697 </TD> <TD> 1,27448039747518 </TD></TR></TBODY>
On the Networking tab of the Developer tool the XMLHTTP response content is in lowercase tags (unexpected since the accepted response content type is text/html) and the page source shows it with uppercase tags.
I haven't fully read the release documentation for IE9, but you can find the IE9 Compatibility Cookbook here... http://msdn.microsoft.com/en-us/library/ff986083(v=vs.85).aspx
Finally, If you like you can raise your own ticket at connect.microsoft.com/ie to pass the issue on to the IE Team for them to have a look at
One of the MSFT moderators here may jump in and make a comment.
I've raised a ticket on this on connect:
- Marked as answer by Yanping WangMicrosoft contingent staff, Moderator Tuesday, May 03, 2011 7:04 AM
I just want to add that I have run in to exactly this problem. I am using Mootools 1.3 to get a large table of data via Ajax to render on screen. Every so often, columns will be missed out and data shifted. Can't reproduce the issue on any other browser or version of IE.
Will there be a fix?I also managed to invoke the bug with a large static HTML table, with Mootools code to highlight every odd row.
I had the same problem as yours but my table was not so large.
The problem came from space in the HTML template generated.
I remove those spaces and problem was solved.
Maybe it can help you :)
- Proposed as answer by Gerfaut1 Friday, May 20, 2011 10:33 AM
Remove all spaces and line breaks between your table element end tags and the start of the next table cell. In other words, make the </td><td> on the same line, right next to each other with NO spaces in between.
- Proposed as answer by chad3c Thursday, May 19, 2011 8:43 PM
I got the same problem with an ajax call to serve a large table.
The first thing I tried was to delete all spaces.
This did not solved my incoerent rendering.
I also tried all the suggestion in this thread but non of the action seemed to work!
At last I also removed any spaces between the closing </td> and the next opening <td>; this tecnique was successfull!!!
Hope this could be of help.
- Proposed as answer by Light_Of_World Monday, December 05, 2011 11:53 PM
I have fixed this problem by removing the <tfoot> element from my table. This is not a solution, but does identify the cause (for me at least).
EDIT - It would appear that this is not a consistent cause. More troubleshooting shows that adding a single line of whitespace anywhere in the table can (potentially) trigger this problem
I am looking deeper into this issue, but the site http://www.voytsje.com seems to be down. Can you spin it back up, or perhaps paste a sample of the HTML that causes this issue for you? I tried the html from the response from IECUSTOMIZER, but I am not able to reproduce the issue.
-John Jansen [MSFT]
Senior Test Lead
-John, Senior Test Lead, Internet Explorer
I also had this issue (or i think i did any way), and in a relatively small table. Curiously it would only happen after several steps were taken on the page. I tried fighting it off by assigning table widths, but removing spaces between <td> tags did eventually seem to fix it. However, next time i auto format it will break again.
I put on table borders so I could see if an extra element was being rendered, but it's just a gap. Only three <td>s in that row and no errors in the table.
Joining this thread to hopefully raise more awareness and a sense of urgency to what is a significant issue. We build and market a web application serving the investment industry and have been steering clients away from IE because of IE9's inability to render dynamically generated table correctly. The tables render correctly in IE8, but it makes no intuitive sense to tell a client not to upgrade to the latest version of IE because this flaw. Furthermore, Microsoft's lack of responsiveness to this problem which was raised in this thread six months ago (and in numerous discussion forums elsewhere) lends little confidence to IE's viability going forward. I hope this issue will be resolved very soon, or we might just have to drop IE support for good.
It appears removing any whitespace between the </td> and <td> does give you a workaround. I'm rendering a dynamic template using jquery templates and the behavior was not consistent; It would work at times and at other times a cell would be misplaced. I had hopes that IE9 would bring IE to a better status among browsers. This hope is fading....
I just wanted to add that I am having this issue as well!
I'm using asp.net MVC 2.0 to build the tables. Taking out the spaces/linebreaks does fix the problem. But that makes my views entirely un-readable and un-maintainable!
any word on a solution for this?
I am also seeing the same issue from time to time in an MVC 3 app. While I am using jQuery in parts of the app, I get the same issue on tables that are generated from pure MVC 3 using Razor: Occasionally a cell will be skipped over one column. The next row is usually fine.
This problem happens only on IE9. Have tested it using several competing browsers (On both Windows and Linux), as well as even IE 6 on Windows 2000, and the problem only manifests in IE9, so this appears to be a new bug in the IE9 code.
Patiently awaiting a bug fix for this issue!
I also experience the same bugs.
My scenario was doing ajax request to retrieve table, append the table into current page, and slide down to display the table.
When dealing with many rows of data, IE randomly skip certain cells (it works fine with other browsers).
I can confirmed the following work around does the trick for me:
- Eliminate any space in our html code (especially between closing column tag "</td>" and the next column tag open "<td>").
For example the following table:
<td></td> <td class="number asset-qty-pending"><%# ((Asset)Container.DataItem).QtyPending.ToString("#") %></td> <td></td>
Removed the space and it become
<td></td><td class="number asset-qty-pending"><%# ((Asset)Container.DataItem).QtyPending.ToString("#") %></td><td></td>
I found a workaround for this on http://stackoverflow.com/questions/7267014/ie9-table-has-random-rows-which-are-offset-at-random-columns.
Apparently it has to do with improper interpretation of spaces between tags.
Execute this code on your table HTML before calling the jQuery code on it:
- Proposed as answer by mcampo84 Friday, December 30, 2011 4:51 PM
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); document.getElementById('div').innerHTML.replace(expr, '><');
place the table in a div element and execute this jscript after partial post back. i think this is the only way to remove white space from IE9
I just wanted to add that I am also having this problem. Removing white space between tags either manually or with regex does work but this is an unacceptable solution as far as I am concerned. I find it extremely disappointing that I am able to find numerous posts and discussions regarding this topic dating back almost a year and as far as I can tell the issue has not even been acknowledged by Microsoft. I have found a few links to bug reports but none of the links lead to a page that exists.
- Edited by LoganGoesPlaces Wednesday, February 22, 2012 3:36 PM
I've contacted Microsoft and had the following e-mail back:
I’ve had a look into this and the bug is
being investigated. If you have a repro on XXXX I’d like to see it.
As a thought, we might be able to
provide some better steps to assist, rather than you have to remove all those
whitespaces. I note XXXX have a Premier support agreement. XXXX is the
Technical Account Manager for XXXX.
Please feel free to contact her if you’d like to explore some additional
guidance around this issue.
Senior Program Manager, Internet
Explorer Product Quality & Supportability
So they are investigating and as I hear updates, I will provide them if necessary.
Please do, this problem seems to be plaguing my tables.
All the links to the issues seem to be gone, and I can't find any closed, or resolved tickets on IE9.
The hack I've noticed that works but I have no idea why is:
<!--[if IE 9]><style type="text/css"></style><![endif]-->
This however only works if the break happens on the initial load, it will not prevent the sorting breakage, for that you need the whitespace stripping RegEx.
Here's a nice example that someone wrote-up.
Why has this issue been removed from connect.microsoft.com? I understand that the release of IE10 is imminent, but to ignore a significant market share is somewhat crazy.
This is a pretty serious issue, clearly quite a few people are experiencing it. If this was Chrome, the issue would be fixed, a new release made available, everyone would be happy. I really hate to make such comparisons, I am a die hard MS dev, but this is a really good example of where Microsoft have dropped the ball.
Does anyone have a link where I can voice my disgust directly to Microsoft about this issue?
try again.... or perhaps you do not have access
Still ACTIVE. I know the jQuery developers have been reviewing their code also.
Sorry, I haven't been following this thread for a long time. Microsoft has acknowledged that there is a bug in table rendering and sure are taking their time releasing a fix for it. I've just been using some workarounds for the problem because I'm not sure Microsoft is planning on fixing this bug ever (It's been over a year since I made this thread). I haven't tried IE10 for a long time but the bug was also found in IE10 preview and is possibly still there. Maybe someone else can confirm this.
I don't really want to waste my time with a broken browser that Microsoft apparently has no intentions of properly supporting. I just use some workarounds and IE users will just have to live with the inferior experience.
I'd really suggest you guys have a look at the ticket on connect. There is a lot more info on there.
As I've written on the connect ticket, my sample application is currently located at http://ie9tablebug.voytsje.com/
I'm also having this issue, but I'm not using jQuery to run my ajax calls. I'm using an ASP.NET GridView to generate my table, and unfortunately this means I don't have the option of removing spaces between my <tr> tags, as some have suggested as a solution. Please fix this, Microsoft!
Brilliant; this fixed the issue for me. Thank you for citing a feasible workaround, mcampo84. (And credit to the original sources for the solution(s), David_2020 and R014ndu$; see the original thread.)
Microsoft, it is absolutely appalling that this issue has not been fixed. You have caused innumerable developers innumerable hours of angst and frustration. If I were a paying Microsoft customer, this would be the deal-breaker for me. In itself, the issue may seem trivial and unimportant, but Microsoft's failure to address what is, in fact, a major issue for developers speaks volumes about Microsoft's attention to detail (or lack thereof).
The real kicker is that your own customers devised a solution over 18 months ago, and yet, no public fix has been issued. Unbelievable.
- Edited by GeraldCough Thursday, October 25, 2012 8:55 PM
I too have had to deal with this issue and reformat my code to look silly just to handle IE.
I used to be one of the few who was both a developer and fan of the IE 8 and 9 products. This issue, and some others like the printing of only one page in a multi-page document and the issue where their own graphing tools won't print the image in IE (but will in all other browsers) has now made me warn all of my users off of the product. These are big bugs coming out of Microsoft products and none of them are being addressed.