TD height not adjusting to new breaks added to innerHTML

[Fredyy]

i am simply updating the innerHTML of a TD with text (replacing '\n'
with '<br />'). In firefox, if i add one line to the existing i.e.

Changing:
123 Your Street
Town, State 12345

To:
123 Your Street
Suite 123
Town, State 12345

The cell that is updated in the "grid" table will overlap the cell in
the row below it (note: it works fine on the bottom cell). I can't
figure out why this is happening. i can remedy it by displaying an
alert(), but i am trying to avoid that at all costs.

Here is an example script:

http://www.ladyrocket.com/test/admin/events2.php

Steps to replicate: Simply click edit link on the first "event" listed
and then change the address in the textarea by either adding or
removing a line of text and save it. You should see what i am talking
about if you are using firefox (i have version 1.5.04).

Note: if you click on the address cell of each event it will use the
same function to update the content of that cell to:
1
2
3
4
5
This was done to verify that function was working right.

Here are the two functions i am using:
function cbUpdate() {
if ( xmlCheckState(request) ) {
var json = request.responseText;

json = json.parseJSON();

if ( json['status'] == 1 ) {

updateElement("evt_address"+json["event_id"],json['event_address']);
updateElement("evt_date"+json["event_id"],json['event_date']);
updateElement("evt_name"+json["event_id"],"");
updateElement("evt_name"+json["event_id"],json['event_name']);

if ( json['event_website'].length == 0 ) {
updateElement("evt_website"+json["event_id"],"n/a");
} else {

updateElement("evt_website"+json["event_id"],json['event_website']);
}
}
}
}

function updateElement(name,text) {
var obj = document.getElementById(name)
var newtext = text.replace(/\n/g,"<br />");

obj.innerHTML = newtext;
}

Any advise would be appreciated.

Thanks, Fredyy

 

[google1]

There's a reference to innerHTML in this file:
http://eastontario.com/conventions/count2.htm

 

[goulart]

I ran into this problem frequently a while ago and solved it with this:

/** Force the page to redraw the layout and fix problems caused by
adding elements to the DOM */
_forcePageLayout = function ()
{
if (browser.isGecko || browser.isOpera) {
document.body.style.height = "1px";
document.body.style.height = "auto";
}
else if (!browser.isKHTML) {
document.body.style.display = "none";
document.body.style.display = "block";
}
}

you'll need to replace the browser conditionals with your own... but it
works fine. i test it on your page in Firefox.

 

[Fredyy]

i tried that, it worked but muddied up the outer table. I changed the
document.body.style.height to '100%' to maintain existing formatting
and it performs exactly the same.

any other ideas?