Originally posted in comp.lang.javas cript:
Newsgroups: comp.lang.javas cript
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('tabl e');
var tmp = toc.removeChild (tables[0]);
toc.appendChild (tmp);
Stewart
Newsgroups: comp.lang.javas cript
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.javas cript
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:[color=blue]
> OK, I found a hack, ugly as it is:[/color]
[color=blue]
> I experimented with width properties of the div.[/color]
[color=blue]
> 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.[/color]
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('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="doStuf f()">
<table><tr><t d 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.javas cript
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('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="doStuf f()">
<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.javas cript
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.javas cript
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:[color=blue]
> 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.[/color]
[color=blue]
> Maybe this is something to do with margins and padding?[/color]
Hmm, you could ask in a CSS or HTML forum such as:
comp.infosystem s.www.authoring.html
or
comp.infosystem s.www.authoring.css
--
Rob
Newsgroups: comp.lang.javas cript
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('tabl e');
var tmp = toc.removeChild (tables[0]);
toc.appendChild (tmp);
Stewart
Newsgroups: comp.lang.javas cript
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.javas cript
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:[color=blue]
> OK, I found a hack, ugly as it is:[/color]
[color=blue]
> I experimented with width properties of the div.[/color]
[color=blue]
> 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.[/color]
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('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="doStuf f()">
<table><tr><t d 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.javas cript
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.getEle mentById('toc') ;
var tables = toc.getElements ByTagName('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="doStuf f()">
<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.javas cript
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.javas cript
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:[color=blue]
> 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.[/color]
[color=blue]
> Maybe this is something to do with margins and padding?[/color]
Hmm, you could ask in a CSS or HTML forum such as:
comp.infosystem s.www.authoring.html
or
comp.infosystem s.www.authoring.css
--
Rob
Comment