FireFox, RemoveChild, AppendChild, making width grow?

Discussion in 'Javascript' started by Stewart, Aug 23, 2005.

  1. Stewart

    Stewart Guest

    Hi,

    I have a div with a table under it. I'm using the DOM to change that
    table dynamically. But when I run it under FireFox, it makes the div
    holding the table grow width-ways. The div itself has no assigned
    width, although it is inside a td which has a % width set.

    I experimented with removing and appending the same table, to prove it
    was nothing to do with the data, and sure enough, the div still grows!

    I have run out of ideas as to how to debug or fix this. Anyone shed any
    light?

    Example code (for making your div get wider) is:

    var toc = document.getElementById('toc');
    var tables = toc.getElementsByTagName('table');
    var tmp = toc.removeChild(tables[0]);
    toc.appendChild(tmp);

    Stewart
    Stewart, Aug 23, 2005
    #1
    1. Advertising

  2. Stewart

    Stewart Guest

    OK, I found a hack, ugly as it is:

    I experimented with width properties of the div.

    By having:
    toc.style.width = '99%';
    after the appendChild, at the end, the div doesn't grow.
    Note that:
    toc.style.width = '100%';
    does allow the growing width.
    Stewart, Aug 23, 2005
    #2
    1. Advertising

  3. Stewart

    RobG Guest

    Stewart wrote:
    > OK, I found a hack, ugly as it is:
    >
    > I experimented with width properties of the div.
    >
    > By having:
    > toc.style.width = '99%';
    > after the appendChild, at the end, the div doesn't grow.
    > Note that:
    > toc.style.width = '100%';
    > does allow the growing width.
    >


    There is more to this than you are letting on. The following test does
    not exhibit your 'growing' behaviour.


    <script type="text/JavaScript">
    function doStuff(){
    var toc = document.getElementById('toc');
    var tables = toc.getElementsByTagName('table');
    var tmp = toc.removeChild(tables[0]);
    alert('hey'); // just to show that the table is removed & replaced
    toc.appendChild(tmp);
    }
    </script>
    <input type="button" value="do stuff" onclick="doStuff()">
    <table><tr><td style="width: 50%;">
    <div id="toc" style="border: 1px solid green; width: 100%;">
    <table border="1">
    <tr>
    <td>This is the table</td>
    <td>This is the table</td>
    </tr>
    <tr>
    <td>This is the table</td>
    <td>This is the table</td>
    </tr>
    </table>
    </div>
    </td></tr></table>


    --
    Rob
    RobG, Aug 24, 2005
    #3
  4. Stewart

    Stewart Guest

    Rob,

    You are absolutely correct. Your script does not reproduce this.

    I took your script and added to and modified it based on my page, until
    it did reproduce the error, and then through trial & error isolated the
    minimum needed to this.

    I found it's down to the CSS: specifically, having overflow:auto and
    width set for the div tag.
    This script does produce the growing width effect:

    <html>
    <head>
    <style type="text/css" media="all">
    div#toc
    {
    border: 1px solid green;
    overflow: auto;
    width: 100%;
    }
    </style>
    <script type="text/JavaScript">
    function doStuff(){
    var toc = document.getElementById('toc');
    var tables = toc.getElementsByTagName('table');
    var tmp = toc.removeChild(tables[0]);
    //alert('hey'); // just to show that the table is removed &
    replaced
    toc.appendChild(tmp);
    }
    </script>
    </head>
    <body>
    <input type="button" value="do stuff" onclick="doStuff()">
    <table>
    <tr>
    <td style="width: 50%;">
    <div id="toc">
    <table> <tr> <td>
    LHS
    </td> </tr> </table>
    </div>
    </td>
    <td style="width: 50%;">RHS</td>
    </tr>
    </table>
    </body>
    </html>

    Stewart
    Stewart, Aug 24, 2005
    #4
  5. Stewart

    Stewart Guest

    However, bizarrely enough, I have to add:
    toc.style.width = '95%';
    to prevent the growth with a hack, on this script.
    Values of 96% or greater allow the growth.

    Maybe this is something to do with margins and padding?
    Stewart, Aug 24, 2005
    #5
  6. Stewart

    RobG Guest

    Stewart wrote:
    > However, bizarrely enough, I have to add:
    > toc.style.width = '95%';
    > to prevent the growth with a hack, on this script.
    > Values of 96% or greater allow the growth.
    >
    > Maybe this is something to do with margins and padding?
    >


    Hmm, you could ask in a CSS or HTML forum such as:

    comp.infosystems.www.authoring.html

    or

    comp.infosystems.www.authoring.css



    --
    Rob
    RobG, Aug 25, 2005
    #6
  7. Stewart

    Stewart Guest

    Stewart, Aug 25, 2005
    #7
  8. Stewart

    Stewart Guest

    My apologies to Mozilla FireFox.

    I've discovered this only happens in Netscape 8 when rendering "like
    FireFox".

    Stewart
    Stewart, Aug 25, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    762
    Bruce Barker
    Oct 10, 2005
  2. Scott
    Replies:
    5
    Views:
    1,408
    Jan C. Faerber
    Oct 29, 2009
  3. Replies:
    1
    Views:
    114
  4. Replies:
    3
    Views:
    159
  5. Christina

    Firefox doesn't like appendChild()

    Christina, Nov 19, 2006, in forum: Javascript
    Replies:
    2
    Views:
    106
    Christina
    Nov 19, 2006
Loading...

Share This Page