Width changes when appending a cloned table to a div

Question

I'm trying to get a homebrewed scrolling table jQuery plugin to work in IE9. It works in all other browsers (FF 3.6+, Safari 5, IE 8). I'm using jQuery 1.6.1.

I'm doing something like this:

var topcontainer = $('<div class=\"topcontainer\"></div>')
                      .css({
                             "background-color":bgcolor,
                             "z-index":basez+1,
                             "position":"absolute", 
                             "top":parent.offset().top,    
                             "left":parent.offset().left,
                             "overflow":"hidden",
                             "height":headerheight,
                             "width":width
                      })
                      .appendTo(container);

var top = this.clone().css({"position":"absolute"});
top.appendTo(topcontainer);

The width of this - which is the original table element - is 914px. After cloning this, top is also 914px. Right after I append top to topcontainer, the width of top changes to 1118px. This wouldn't be so bad if I could do something like:

top.width(914);
  or
top.css("width", "914px");

but that doesn't seem to have any effect. I've tried stripping out all the extra css I'm applying to topcontainer. That doesn't seem to help either. I noticed that this had a width attribute of 100% and I removed that... no dice.

I've been working on this for a couple days. Any help would be appreciated.

Answer 1

I boiled my code down to:

jQuery(document).ready(function() {
    var tableClone = document.getElementById("table1").cloneNode(true);     
    document.body.appendChild(tableClone);
});

So all I have is the table data, a jquery include and a doctype to make sure I was in standards mode. This javascript was also causing the cloned table to be resized. I verified that all my mark up was closed correctly.

What finally worked was removing all the white space between the opening <tr> and the first <th> tags in each row (yes, I do mean <th>) and also between the last </td> tag and closing </tr> tag.

Could this be a bug in IE9? I'm starting to think yes. Anyone have any alternate theories?