By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,570 Members | 999 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,570 IT Pros & Developers. It's quick & easy.

Optgroup causes blank line in Select; Firefox but not IE

P: n/a
I am using javascript to manipulate optgroups in select elements.
When the results are displayed in Firefox 2.0 there is an
annoying blank line at the top of the multi-line select box.
This doesn't happen with IE7.

There's a little program below which illustrates the problem.
I create two multi-line select boxes. The first one has an
optgroup and an option specified in the HTML. That one displays
with "opt1" as the first line. The second select is populated
using appendChild(). As far as I know the results should be
the same.

Can anyone explain this?
----------------------------------------------
<html>
<head>
<script>
function addOpt() {
var theSel = document.getElementById("select2");
var optGrp = document.createElement("optgroup");
optGrp.label="opt2";
theSel.appendChild(optGrp);
var item = new Option();
optGrp.appendChild(item);
item.value = "bar";
item.text = "bar";
}
</script>
</head>
<body onload="addOpt();">
<select size=8 id=select1>
<optgroup label=opt1>
<option value="foo">foo
</optgroup>
</select>
<select size=8 id=select2>
</select>
</body>
</html>
Jun 27 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Patrick Nolan wrote:
I am using javascript to manipulate optgroups in select elements.
When the results are displayed in Firefox 2.0 there is an
annoying blank line at the top of the multi-line select box.
This doesn't happen with IE7.

There's a little program below which illustrates the problem.
I create two multi-line select boxes. The first one has an
optgroup and an option specified in the HTML. That one displays
with "opt1" as the first line. The second select is populated
using appendChild(). As far as I know the results should be
the same.

Can anyone explain this?

[...]
var theSel = document.getElementById("select2");
var optGrp = document.createElement("optgroup");
optGrp.label="opt2";
theSel.appendChild(optGrp);
[...]
<select size=8 id=select2>
</select>
Try <http://validator.w3.org/#validate_by_input+with_optionsfor a start.

WFM if the `select' element is dynamically generated as well.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404
Firefox/2.0.0.14
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jun 27 '08 #2

P: n/a
On 2008-05-01, Thomas 'PointedEars' Lahn <Po*********@web.dewrote:
Patrick Nolan wrote:
>I am using javascript to manipulate optgroups in select elements.
When the results are displayed in Firefox 2.0 there is an
annoying blank line at the top of the multi-line select box.
This doesn't happen with IE7.

There's a little program below which illustrates the problem.
I create two multi-line select boxes. The first one has an
optgroup and an option specified in the HTML. That one displays
with "opt1" as the first line. The second select is populated
using appendChild(). As far as I know the results should be
the same.

Can anyone explain this?

[...]
var theSel = document.getElementById("select2");
var optGrp = document.createElement("optgroup");
optGrp.label="opt2";
theSel.appendChild(optGrp);
[...]
<select size=8 id=select2>
</select>

Try <http://validator.w3.org/#validate_by_input+with_optionsfor a start.

WFM if the `select' element is dynamically generated as well.
OK. I learned that any SELECT element created in HTML must contain at
least one OPTION. So I put in a dummy OPTION, intending to remove it
in my onload handler. I don't understand the result. I tried
removeFirstChild() at the beginning of the handler, but there were no
OPTION elements to find at that point.

Finally I found a kluge that works. I add the new OPTGROUP and OPTION
in the onload handler, then removeFirstChild twice to get rid of the
dummy OPTION. This produces the desired effect, but I certainly don't
know why. The new script is below.

By the way, I figured out how to install the Firefox DOM inspector.
It didn't help. In the first version of the script, it showed a #text
element (with no content) before the OPTGROUP in both SELECTs. There
was no clue why Firefox should handle them differently.

--------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Select element with blank line</title>
<script type="text/javascript">
function addOpt() {
var theSel = document.getElementById("select2");
var optGrp = document.createElement("optgroup");
optGrp.label="opt2";
theSel.appendChild(optGrp);
var item = new Option();
optGrp.appendChild(item);
item.value = "bar";
item.text = "bar";
theSel.removeChild(theSel.firstChild);
theSel.removeChild(theSel.firstChild);
}
</script>
</head>
<body onload="addOpt();">
<select size=8 id=select1>
<optgroup label=opt1>
<option value="foo">foo
</optgroup>
</select>
<select size=8 id=select2>
<option value="bar">bar
</select>
</body>
</html>
Jun 27 '08 #3

P: n/a
*** Patrick Nolan escribió/wrote (Thu, 1 May 2008 17:04:16 +0000 (UTC)):
I am using javascript to manipulate optgroups in select elements.
When the results are displayed in Firefox 2.0 there is an
annoying blank line at the top of the multi-line select box.
This doesn't happen with IE7.
It works fine in all other browsers I've tested: Opera 9, Konqueror 3.5 and
even Firefox 3 beta 5. Furthermore, if you obtain the generated HTML and
paste it on the page as plain HTML the <selectis rendered fine.

I'd dare say you've hit a bug in Firefox 2.
--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://bits.demogracia.com
-- Mi web de humor en cubitos: http://www.demogracia.com
--
Jun 27 '08 #4

P: n/a
Patrick Nolan wrote:
OK. I learned that any SELECT element created in HTML must contain at
least one OPTION. So I put in a dummy OPTION, intending to remove it in
my onload handler. I don't understand the result. I tried
removeFirstChild() at the beginning of the handler, but there were no
OPTION elements to find at that point.
Because there is a whitespace text node that is the first child node.
Finally I found a kluge that works. I add the new OPTGROUP and OPTION in
the onload handler, then removeFirstChild twice to get rid of the dummy
OPTION. This produces the desired effect, but I certainly don't know
why. The new script is below.
You have removed the whitespace text node, and then its `option' sibling.
By the way, I figured out how to install the Firefox DOM inspector. It
didn't help. In the first version of the script, it showed a #text
element (with no content)
This is not entirely true. The content are whitespace characters,
presumably newline followed by a number of spaces.
before the OPTGROUP in both SELECTs. There was no clue why Firefox
should handle them differently.
The reason is that Firefox/Gecko is standards-compliant in that regard,
while IE/Trident seemingly randomly removes whitespace text nodes from the
document tree, and on the other hand inserts them where they don't belong
(this leads to certain display bugs e.g. with lists).

While it is a possibility to remove the whitespace in the markup, you should
create the entire `select' element with client-side scripting instead, as I
said before.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Jun 27 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.