Does anyone get zero-height select fields in Firefox 3.6.3?
- by user350635
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>
