Good catch!


Expanding slightly on what Mona was saying, TR is not longer a valid
child element of TABLE in modern doc types, you must have a TBODY (or
a THEAD or TFOOT) in between.  Most browsers will helpfully insert one
for you if you leave it out of your markup, but that causes problems
when you're doing dynamic DOM manipulation.  This particular problem
-- the way it keeps getting moved down a pixel -- is fascinating. :-)
And easily replicated.

So the moral is:  Put in a TBODY and put the rows in that:

<tbody id='test'>

...and you should be okay.  (In the above I moved the id to the TBODY,
which means your code could be left unchanged.)

The W3C validator[1] may be helpful when diagnosing problems like this
in the future, it would have flagged up the missing tbody assuming you
have a proper doc type on your doc (which you should if you're using

[1] http://validator.w3.org/

T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On Apr 21, 8:22 am, Mona Remlawi <mona.reml...@gmail.com> wrote:
> 2 things, i advice you to add the global css rule
> table {border-collapse: collapse}
> and to insert your rows into table/tbody element
> <table><tbody id='test'></tbody></table>
> this would make it work for FF and IE
> on the other hand, if you are building dom elements on the fly, why
> not take a look at following links
> http://wiki.github.com/madrobby/scriptaculous/builderhttp://www.prototypejs.org/api/template
> very handy and will save you tons of code.
> cheers
> --
> mona
> mreml...@optaros.com
> --
> On Mon, Apr 20, 2009 at 8:44 PM, nroose <nro...@gmail.com> wrote:
> > I have code that removes the content of a table and then redraws it.
> > It works great in Safari, but in firefox, the content that I draw in
> > moves down a couple of pixels each time I draw it.
> > I have reproduced it with only a little bit of code:
> > <html><header>
> > <script src="/javascripts/prototype.js" type="text/javascript"></
> > script>
> > </header><body>
> > <table id='test'>
> > </table>
> > <script type="text/javascript">
> > function redraw_rows(){
> >  $('test').update();
> >  row = new Element("tr")
> >  $('test').insert({'bottom': row});
> >  row.insert({'bottom': new Element("td")});
> > }
> > </script>
> > <a href='javascript:redraw_rows();'>test</a>
> > </body></html>
> > Can anyone help?
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to