Optgroup causes blank line in Select; Firefox but not IE

P

Patrick Nolan

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>
 
T

Thomas 'PointedEars' Lahn

Patrick said:
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>
Click to expand...

Try <http://validator.w3.org/#validate_by_input+with_options> for 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
 
P

Patrick Nolan

Patrick said:
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>
Click to expand...

Try <http://validator.w3.org/#validate_by_input+with_options> for a start.

WFM if the `select' element is dynamically generated as well.
Click to expand...
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>
 
Á

Álvaro G. Vicario

*** 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.
Click to expand...

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 <select> is rendered fine.

I'd dare say you've hit a bug in Firefox 2.
 
T

Thomas 'PointedEars' Lahn

Patrick said:
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.
Click to expand...

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.
Click to expand...

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)
Click to expand...

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.
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Multi select options in a menu 1
Manipulate select, optgroup, option boxes 3
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Scrolling multiple-select, IE vs Firefox 4
Simple script works in Firefox but not IE7 19
Select list without a helper button 2
Something Wrong? IE works but Firefox ... 1

Members online

Total: 27 (members: 1, guests: 26)
Robots: 465

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top