Auto-scrolling with dynamic data

I'm using this div container on my web page to display data in:

<div id="id_screen_area" style="border:1px solid black; width:400px; height:100%; overflow:scroll; overflow-y:scroll; overflow-x:hidden;">

I'm bringing the data in via Ajax (through the "ajax data tunnel") and as the data comes into the div container, it scrolls the page up as the data fills the web page. This works very nicely in Firefox and Windows Safari but not in IE8.

Here is the Ajax portion that populates the div as the data comes into the browser from the server:


function returnAjaxSendTextMessage()
{
var objDiv = document.getElementById('id_screen_area');
if (http.readyState == 4) //Finished loading the response
{
var response = http.responseText;
document.getElementById("id_screen_area").innerHTML = response;
objDiv.scrollTop = objDiv.scrollHeight;
}
}


I was wondering if anyone knows a trick to make it scroll in IE8?

Thanks for any tips...

At a first glance:

overflow:scroll; overflow-y:scroll; overflow-x:hidden

overflow is the general attribute (both x and y), thus it is illogical to set first the overflow as scroll, then make the overflow-y hidden. Remove the red.

@kor

I removed overflow:scroll; per your suggestion but it didn't change the results :confused: