NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider

[mscir]

I'm adding text to a div using innerHTML, and watching the width of the
div using offsetWidth. In IE the offsetWidth increases when the div gets
wider, but in Netscape 7.2 or Firefox 1.0.3 it doesn't. Is there a way I
can find when a div increases its width in non-IE browsers?

TIA,
Mike

[Martin Honnen]

mscir wrote:

I'm adding text to a div using innerHTML, and watching the width of the
div using offsetWidth. In IE the offsetWidth increases when the div gets
wider, but in Netscape 7.2 or Firefox 1.0.3 it doesn't. Is there a way I
can find when a div increases its width in non-IE browsers?

If you want to add stuff to an element you should using the DOM with
createElement and appendChild, adding to innerHTML is totally
inefficient as then the old content is reparsed.

As for div elements they are block elements so just because you add some
text to a block element its block width does not change as it it not
determined by the text content but by the width of the container block.

And changing the text content of an inline <span> element with Mozilla
correctly changes its offsetWidth:

var span = document.create Element('span') ;
span.innerHTML = '<strong>Kibolo gy for all.<\/strong>';
document.body.a ppendChild(span );
alert(span.offs etWidth);
span.innerHTML += '<strong>All for Kibology.<\/strong>';
alert(span.offs etWidth);
--

Martin Honnen
http://JavaScript.FAQTs.com/

[mscir]

Martin Honnen wrote:

mscir wrote: <snip>
If you want to add stuff to an element you should using the DOM with
createElement and appendChild, adding to innerHTML is totally
inefficient as then the old content is reparsed.

As for div elements they are block elements so just because you add some
text to a block element its block width does not change as it it not
determined by the text content but by the width of the container block.
I was adding characters to the div and watching for when the div got
wider than the body.
And changing the text content of an inline <span> element with Mozilla
correctly changes its offsetWidth:

var span = document.create Element('span') ;
span.innerHTML = '<strong>Kibolo gy for all.<\/strong>';
document.body.a ppendChild(span );
alert(span.offs etWidth);
span.innerHTML += '<strong>All for Kibology.<\/strong>';
alert(span.offs etWidth);

Great!

Thanks,
Mike

[Martin Honnen]

mscir wrote:

I was adding characters to the div and watching for when the div got
wider than the body.

I think the div stays as wide as the body (put a border around it to
see) and the text overflows the width if you really put in a sequence of
continous characters without space so that the text cannot be broken
into lines.

--

Martin Honnen
http://JavaScript.FAQTs.com/