FireFox, RemoveChild, AppendChild, making width grow?

S

Stewart

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
 
S

Stewart

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.
 
R

RobG

Stewart said:
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>
 
S

Stewart

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
 
S

Stewart

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?
 
R

RobG

Stewart said:
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
 
S

Stewart

My apologies to Mozilla FireFox.

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

Stewart
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top