Kevin Dente's Blog

The Blip in the Noise

June 2007 - Posts

Empty DIV takes up space after setting innerHTML to blank on IE (aka blank lines after UpdatePanel postback)

Maybe this is common knowledge, but my co-worker and I spent some time chasing this down today, so I figured I'd post it in the hope that it will save other people some time. 

Normally, a empty, unstyled DIV reserves no space in an HTML document. However, it seems that under Internet Explorer (we were testing under IE7), if you set the innerHTML property of such a div to an empty string, suddenly the DIV starts taking up space. In other words, if you have this:

some text
<div id = "theDiv"></div>
some more text

and execute a line of script that does this:

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

then suddenly a blank line will start appearing in between "some text" and "some more text" - the DIV now occupies space in the flow. This doesn't happen in Firefox, and I believe it's a bug in IE.

We were seeing this using ASP.NET AJAX. We have multiple UpdatePanels on a page, and one of them was rendering empty content. After an async postback, a blank line started appearing where the empty UpdatePanel was. The UpdatePanel script code sets the innerHTML property to the result of the async-postback (blank in this case), and suddenly the UpdatePanel DIV was taking up space where it hadn't before.

The fix in our case was easy - set the RenderMode property of the UpdatePanel to "Inline".

 

Posted Friday, June 29, 2007 2:18 PM by kevindente | 39 comment(s)

More Posts