If you open this HTML in Firefox 3.6.3 (confirmed in some earlier versions too), and click the drawStuff() link repeatedly, it doesn't render the contents of the last div consistently. Looking more closely it seems like it's rendering select fields with height=0. Any idea why this would happen?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> A Page </title>
<script type="text/javascript">
function drawStuff() {
for (var i = 1; i <= 5; i++) {
var curHtmlArr = [];
for (var j = 0; j < 5; j++){
curHtmlArr.push("<select>");
curHtmlArr.push(getOptgroup());
curHtmlArr.push(getOptgroup());
curHtmlArr.push(getOptgroup());
curHtmlArr.push("<\/select>");
}
var
foobar = document.getElementById('elem_' + i);
foobar.innerHTML = curHtmlArr.join('');
}
}
function getOptgroup(){
var htmlArr = [];
htmlArr.push('<optgroup label="Whatever">');
for (var ii = 0; ii < 32; ii++){
htmlArr.push(' <option value="' + ii + '"> Blah ' + "<\/option>");
}
htmlArr.push("<\/optgroup>");
return htmlArr.join('');
}
</script>
</head>
<body>
<table border=1 style="width:900px;" summary="A Table">
<tr>
<td> <div id="elem_1"></div> </td>
<td> <div id="elem_2"></div> </td>
<td> <div id="elem_3"></div> </td>
<td> <div id="elem_4"></div> </td>
<td> <div>abc</div> <div id="elem_5"></div> </td>
</tr>
</table>
<a href="javascript:drawStuff()"> drawStuff() </a>
<script type="text/javascript">
drawStuff();
</script>
</body>
</html>
