Table formatting issues with Internet Explorer 9

[steve828]

Hello, I seem to be experiencing some issues with the formatting/layout of my table when using tablesorter (version 2.7.11) when viewed in Internet Explorer 9. There are no issues present when viewed in Chrome (version 24) or Firefox (version 19).

It seems that certain table columns are being "pushed" over to the wrong row which is throwing off the overall width of the entire table. After roughly 20 hours of testing I believe that I've ruled out any possibility of this being a CSS formatting error, or a table formatting error. I made sure to use only the CSS and code provided in the tablesorter demo files to rule out any CSS or code errors on my part. I also looked over my table code (which involves php since I'm gathering my table data from a mysql database) about a dozen times and couldn't see anything out of the ordinary.

To see what I'm talking about, please view the following page in IE 9: http://tinyurl.com/ak3naru

You should notice that one or more of the items have displaced columns. For example, one item doesn't have anything listed under the 'Image' column (a picture should normally be there), but the image was instead pushed into the column to the right (the MSRP column). This has a domino effect in which all the remaining values for that column are now shifted out of place.

To ensure that it wasn't just a problem with the way I inserted that particular item into the database, I tried deleting the item(s) that hard formatting issues, and that didn't solve anything. It just caused new items to take on the formatting issues.

I've noticed that this only seems to be a problem when roughly 40-60 or more items are being displayed in a table. If I have fewer than 40-60 items in a table, it doesn't seem to have any formatting issues. My best guess is that the higher number of items in a table may be causing IE 9 to take abnormally long to load the table, and perhaps the table data is being loaded before the table's "structure" or layout has had a chance to load, causing the layout issues. Admittedly I'm just making a wild guess here.

For example, if you visit these two other tables that I have (both of which have less than 40-60 items) you won't encounter any formatting issues in IE 9, even though the html and css code for these pages is identical to the page that is having formatting issues:
http://tinyurl.com/bko463n
http://tinyurl.com/bkaa93s

Yet try visiting another table where I have at least 40-60 items, and you encounter formatting issues again. Please see: http://tinyurl.com/afaw74d (but for some reason this table requires you to click on the 'MSRP' table heading before the formatting issues appear. But if you click on the 'Item' table heading two times, the formatting issues go away again.

To test my theory that having a higher number of items in the tables is the cause of the formatting issues, I tried deleting a few dozen entries from one of the tables that was having formatting issues, and sure enough, the formatting issues went away once there were fewer items in the table.

I also noticed that this formatting issue was never a problem with any versions of tablesorter until tablesorter version 2.1.2.0. I also noticed that when I removed the line of code "f=document.createDocumentFragment()" from the jquery.tablesorter.min file (in version 2.1.2.0) that I no longer had formatting issues. Unfortunately removing this line of code meant that stickyHeaders no longer worked, and this is a feature I'd really like to use.

I've tried just about everything I can think of to remedy this issue, and I would very sincerely appreciate any help that you might be able to provide. Thank you!

[Mottie]

Yeah, that's a very odd error that only seems to happen in IE9.

If you read through issue #128, you'll find out that IE9 seems to randomly incorporate empty cells into large tables. So if you remove all tabs, spaces and carriage returns between table cell elements (</td><td>), it will format correctly. Also, check out this blog post (also referenced in the aforementioned issue).

[steve828]

Hello Mottie,

I really appreciate your help and your ongoing work on Tablesorter. Just as you suspected, it was indeed the spaces and carriage returns between cell elements that we're causing IE 9 to insert blank cells into random places. Everything is working great now. And as for my opinion about the Internet Explorer browser.. well just just say I didn't think it could get any lower than it already was prior to this experience but sure enough, my disdain for IE seems to know no bounds. Anyways.. enough ranting.. thanks again!