By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,426 Members | 1,729 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,426 IT Pros & Developers. It's quick & easy.

FireFox, RemoveChild, AppendChild, making width grow?

P: n/a
Originally posted in comp.lang.javascript:

Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 23 Aug 2005 02:50:04 -0700
Local: Tues, Aug 23 2005 10:50 am
Subject: FireFox, RemoveChild, AppendChild, making width grow?
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('tabl*e');
var tmp = toc.removeChild(tables[0]);
toc.appendChild(tmp);
Stewart

Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 23 Aug 2005 03:06:44 -0700
Local: Tues, Aug 23 2005 11:06 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
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.


Newsgroups: comp.lang.javascript
From: RobG
Date: Wed, 24 Aug 2005 02:59:17 GMT
Local: Wed, Aug 24 2005 3:59 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?

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('tabl*e');
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

Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 24 Aug 2005 07:01:10 -0700
Local: Wed, Aug 24 2005 3:01 pm
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?

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('tabl*e');
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


Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 24 Aug 2005 07:06:44 -0700
Local: Wed, Aug 24 2005 3:06 pm
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
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?


Newsgroups: comp.lang.javascript
From: RobG
Date: Thu, 25 Aug 2005 01:07:32 GMT
Local: Thurs, Aug 25 2005 2:07 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?


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

Aug 25 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
My apologies to Mozilla FireFox.

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

Stewart

Aug 25 '05 #2

P: n/a
My apologies to Mozilla FireFox.

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

Stewart

Aug 25 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.