@Mona: Good catch!
@nroose: 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: <table> <tbody id='test'> </tbody> </table> ...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 Prototype). [1] http://validator.w3.org/ HTH, -- T.J. Crowder tj / crowder software / com Independent Software Engineer, consulting services available On Apr 21, 8:22 am, Mona Remlawi <[email protected]> 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 > [email protected] > > -- > > On Mon, Apr 20, 2009 at 8:44 PM, nroose <[email protected]> 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
