Chrome/IE table cell positioning help

Question

I am making a tiny script to make a HTML element editable. When you click on an element, it gets replaced with a textarea, and you can basically enter the new text. When you press enter, the textarea is replaced with the original element with its innerHTML updated.

The demo of the script is here: http://iambot.net/demo/editable/

Now the problem is with the inline table editing. It works perfectly on FF 3.6, but on Chrome/Safari, once the value of a cell is updated, the position of the updated cell shifts to the right by the width of a cell.(Just try the demo in Chrome/Safari) It totally messes up the whole table. I am a beginner in CSS and not able to identify where exactly I'm going wrong.

Any help/pointers appreciated! Thanks.

Answer 1

I believe it may have to do with replacing a table cell with a textarea, which have very different display behaviors. It may also have something to do with the variable width of the <table> element. However, for simplicity's sake, I wanted to try to see if it could be simplified to remove the cloneNode() of _oldChild.

I modified your code a bit and posted it here:

editable.js: http://pastie.textmate.org/private/u4nruhu9pzgjjv5kwigo3q

editable.html: http://pastie.textmate.org/private/hdpib2ksrllotmqi3gzkia

It works for me now in Chrome and Firefox, but you may still want to tweak things a bit. Basically I just changed it to save the .innerHTML value of _child, empty the contents of _child and place the <textarea> (_node) as a child of _child. When restoring the view, I just remove _node from the DOM and restore the contents of _child.

I hope this helps. Ask away if you have any questions.