Does anyone get zero-height select fields in Firefox 3.6.3?
Posted
by user350635
on Stack Overflow
See other posts from Stack Overflow
or by user350635
Published on 2010-05-26T07:38:21Z
Indexed on
2010/05/26
7:41 UTC
Read the original article
Hit count: 162
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>
© Stack Overflow or respective owner
