Rendererror on IE6 + AJAX with multiple selects

Who ever has to support the old IE6 and is not able to ignore or to bann users with this browser (or is part of an active resistance de:“Webmaster-Aufstand-gegen-alte-Internet-Explorer“ ), has to hack around things quiet often.
One big problem is that the IE6 has some render problems when you manipulate content in the DOM tree. If this happens to earlie you maybe get boxs which are cut off or your footer may have an wrong position because the IE didn’t update the box size in which you updated your content.

In my case i had an select field with the attribute „multiple“. This should haven an height of 300px set via CSS. The select-node was created via JavaScript. The first select got content via AJAX. The second should be empty as long as you don’t double click the first and copy content from left to right.  The complete construction was created and attachted on page load. The first select was displayed correctly. But the second one looks like an normal select with one line height, not 300px as expected.

To fix this problem you have to set an little timer which triggers an function which again manipulates the element to force the IE to rerender this section. So if your footer position is wrong after an update of any content, just update an little style attribute and reset it:

setTimeout("getElementById('footerId').style.height = (footerHeight+1)+'px'; getElementById('footerId').style.height = (footerHeight-1)+'px';",500);

This doesn’t work with my empty multiple select when i used the select field itself. I had to create an new DIV-Container right under the select-field which i resized a bit and removed it afterwards. This then also updated the select-field.

setTimeout("ieFixSelect('mySelect')",500);
 
function ieFixSelect( selectId ){
    var node = getElementById( selectId );
    var fixNode = document.createElement('DIV');
 
    node.parentNode.appendChild( fixNode );
 
    fixNode.style.height = '1px';
    fixNode.parentNode.removeChild( fixNode );
}