Redraw DIV

[chris_gay]

Hi all,

Hope this is the right place. I have a div in my webpage


<div id="mydiv"></div>


Using javascript I update the innerHTML of the div


document.getElementById("mydiv").innerHTML = "blah";


All is fine so far, the div now has "blah" in it.

However when I remove the div's content


document.getElementById("mydiv").inerHTML = "";


The content dissapears but the space used by the content remains. Using a bigger example:


<div id="mydiv1"></div>
<div id="mydiv2"></div>
<div id="mydiv3"></div>
<div id="mydiv4"></div>

document.getElementById("mydiv1").innerHTML = "blah1";
document.getElementById("mydiv2").innerHTML = "blah2";
document.getElementById("mydiv3").innerHTML = "blah3";
document.getElementById("mydiv4").innerHTML = "blah4";


Give me a HTML plage that looks like this:


blah1
blah2
blah3
blah4


Now I do:


document.getElementById("mydiv3").innerHTML = "";


And my page looks like this


blah1
blah2

blah4


Why oh why is there a space remaining where the div content once was.

Oh this only occurs in IE, in Firefox it behaves as you would expect.

Does anyone have any ideas how to get the div to refresh?

Thanks in advance,

Chris.

[PeejAvery]

IE has still to get CSS right. Microsoft has openly declared its stance of web standards and is always one version behind.

I would suggest setting the display style of the divs when you empty them. For example, either set the height to zero, or set the display style to "" as well.

[nitin.randive]

Make this :-

document.getElementById("mydiv3").style.height='0px'
document.getElementById("mydiv3").style.width='0px'

[chris_gay]

Hi thanks for that,

I'd just sussed it last night and was going to post findings this morning... doing what you suggest did not quite work for me, I also have to set:

style.position = 'absolute' to hide the div fully and then

style.position = 'relative' to get it back again

Bloomin IE quirks.

Thanks again,

Chris.