fail scroll to bottom of a div on IE
<p>I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files. </p>

<p>test5.html :</p>

<pre><code>&lt;div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'&gt;
&lt;/div&gt;
&lt;script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
function showrsp(){
    jQuery.get("test5a.html", function(data) {
        $('#div').append(data); 
        $(document).ready(function(){asd();});
    }); 
};

function asd(){
    $('#div').scrollTop($('#div')[0].scrollHeight);
}

showrsp();
&lt;/script&gt;
</code></pre>

<p>test5a.html :</p>

<pre><code>&lt;p&gt;asdasdas&lt;/p&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
&lt;p&gt;asdasdas&lt;/p&gt;&lt;p&gt;asdasdas&lt;/p&gt;&lt;img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /&gt;
</code></pre>

<p>How to wait until innerHTML finish render the contents before execute function asd()?</p>

<p>Note : you can try replace my code <code>$(document).ready(function(){asd();});</code> with <code>setTimeout("asd();", 3000);</code> to wait for 3 seconds then only execute asd(). All messages are displayed within 3 seconds, so the scrollbar success position at the bottom. Unfortunately I don't know how long it takes to display all messages, maybe 5 or 10 seconds? How to detect when the contents are finish rendered?</p>
