SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Followup Article: Quirky IE7 Table Rendering

    I thought this might be useful to document properly, because I haven't found any other articles about this behavior anywhere. This is for people who manipulate the DOM via javascript.

    I had to take a table provided in HTML, and transform it -- the actual transformation isn't important. The easiest way to accomplish this transformation was to create a new table object, add rows and cells to it, then append it to the proper parent when I was done (with a replaceChild call).

    The code worked great until I tested it in IE. In IE the table simply disappeared as though it had been deleted from the DOM entirely. My investigation revealed that it actually was in the DOM, and it had been transformed properly, just like in FF, which was bizarre because it still didn't render, or throw an error or anything.

    That's when I compared the original table code with the new table code in the DOM. As plain code they were the same, with a table tag, containing trs which contained tds. In the DOM, however, there was one very important difference: the original table had a TBODY tag that actually contained the trs. I had never added a tbody in my script, so the new table didn't have one.

    Here's my educated guess about what happens: the IE team knew that most tables weren't formed using the tbody, thead, or tfoot tags. They accounted for this in the markup parser implementation.

    What that means is that when the html file data is parsed, and arranged into memory as the DOM, IE7 checks tables to see if they have a tbody tag or not. It's smart enough to add one as necessary.

    The parser was probably written by a person or group of people that wasn't the same as the group that wrote the IE renderer. The IE renderer assumes that the DOM it renders has gone through the parser.

    When I manipulated the DOM directly using javascript I created a table that didn't have a tbody tag. The parser would have caught that and added one intelligently, but the parser doesn't interact with javascript, so my table was passed straight to the renderer... which required that there be a tbody tag, and therefore rendered nothing whatsoever.

    Moral of the story: make sure you add a tbody tag explicitly to a table, if you create it with javascript, and want it to work in IE.
    Bring out our hope and reason, before we pine away.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats pretty well known. Amusingly enough the only place I can cite right now is a comment from this js file:

    http://jsonml.org/JsonML.js

    Quote Originally Posted by Line 104
    // in IE must explicitly nest TDs in TBODY

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, known or not, I also couldn't find a reference to it. Maybe this will float to the top of google and serve as an entry point for people with the same issue!
    Bring out our hope and reason, before we pine away.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •