appendChild problems in IE

[rsndll]

I have the following javascript code that works perfectly in any browser except IE. The xml document provides an array of 'markers' that are iterated through so that a marker is placed on a Google Map and also a text entry (innerHTML) is put in the 'sidebar' div.
The problem I have with IE is that only the first marker text entry of the array is placed in the sidebar. The markers on the map show OK.
Any suggestions?

function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();

var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(51.510887,-0.154582), 12);
return;
}

var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var photo1 = markers[i].getAttribute('photo1');
var inrate1 = markers[i].getAttribute('inrate1');
var outrate1 = markers[i].getAttribute('outrate1');
var age = markers[i].getAttribute('age');
var size = markers[i].getAttribute('size');
var npp = markers[i].getAttribute('npp');
var address = markers[i].getAttribute('address');

var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));

var marker = createMarker(point, name, address, photo1, age, size, inrate1, outrate1, npp );

var div = document.createElement('div');

sidebar.appendChild(div);

createSidebarEntry(marker, name, distance, div);
map.addOverlay(marker);

bounds.extend(point);
}

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}

function createSidebarEntry( marker, name, distance, div) {

var html = '<b>' + name + '<\/b> (' + distance.toFixed(1) + ' miles)<br>';

div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#333';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#222';
});
div.innerHTML = html;
}

Associated HTML page code:

<td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; margin-left:10px; font-size: 11px; color: #FFF"></div> </td>

[rsndll]

The problem was with this "overflow: auto;". It all works OK in IE now, luckily it wasn't necessary for my application.
The bug is detailed here:
[webbugtrack.blogspot.com...]