Click here to get back home

error in FireFox with SELECT input
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
error in FireFox with SELECT input lkrubner 01-30-2005
Posted by lkrubner on January 30, 2005, 3:48 pm
Please log in for more thread options
I'm facing an extremely irksome bug in FireFox. This select tag is not
rendering quite right. When I click on it to choose a color, it shows a
scroll tab, but the scroll only goes down to the 43 option and ends
with f0f. However, I find that when I use the arrow keys, I can still
walk through the whole list. It just isn't visible. Considering the
javascript involved, this is a limiting bug.


Text color: <select onChange="insertAtCursorSpan(this.form.inputId5,
this);"><option value="">No choice made</option>
<option value="000" style="color:000;">000</option>
<option value="004" style="color:004;">004</option>
<option value="007" style="color:007;">007</option>
<option value="009" style="color:009;">009</option>

<option value="00a" style="color:00a;">00a</option>
<option value="00c" style="color:00c;">00c</option>
<option value="00f" style="color:00f;">00f</option>
<option value="040" style="color:040;">040</option>
<option value="044" style="color:044;">044</option>
<option value="047" style="color:047;">047</option>

<option value="049" style="color:049;">049</option>
<option value="04a" style="color:04a;">04a</option>
<option value="04c" style="color:04c;">04c</option>
<option value="04f" style="color:04f;">04f</option>
<option value="070" style="color:070;">070</option>
<option value="074" style="color:074;">074</option>

<option value="077" style="color:077;">077</option>
<option value="079" style="color:079;">079</option>
<option value="07a" style="color:07a;">07a</option>
<option value="07c" style="color:07c;">07c</option>
<option value="07f" style="color:07f;">07f</option>
<option value="090" style="color:090;">090</option>

<option value="094" style="color:094;">094</option>
<option value="097" style="color:097;">097</option>
<option value="099" style="color:099;">099</option>
<option value="09a" style="color:09a;">09a</option>
<option value="09c" style="color:09c;">09c</option>
<option value="09f" style="color:09f;">09f</option>

<option value="0a0" style="color:0a0;">0a0</option>
<option value="0a4" style="color:0a4;">0a4</option>
<option value="0a7" style="color:0a7;">0a7</option>
<option value="0a9" style="color:0a9;">0a9</option>
<option value="0aa" style="color:0aa;">0aa</option>
<option value="0ac" style="color:0ac;">0ac</option>

<option value="0af" style="color:0af;">0af</option>
<option value="0c0" style="color:0c0;">0c0</option>
<option value="0c4" style="color:0c4;">0c4</option>
<option value="0c7" style="color:0c7;">0c7</option>
<option value="0c9" style="color:0c9;">0c9</option>
<option value="0ca" style="color:0ca;">0ca</option>

<option value="0cc" style="color:0cc;">0cc</option>
<option value="0cf" style="color:0cf;">0cf</option>
<option value="0f0" style="color:0f0;">0f0</option>
<option value="0f4" style="color:0f4;">0f4</option>
<option value="0f7" style="color:0f7;">0f7</option>
<option value="0f9" style="color:0f9;">0f9</option>

<option value="0fa" style="color:0fa;">0fa</option>
<option value="0fc" style="color:0fc;">0fc</option>
<option value="0ff" style="color:0ff;">0ff</option>
<option value="400" style="color:400;">400</option>
<option value="404" style="color:404;">404</option>
<option value="407" style="color:407;">407</option>

<option value="409" style="color:409;">409</option>
<option value="40a" style="color:40a;">40a</option>
<option value="40c" style="color:40c;">40c</option>
<option value="40f" style="color:40f;">40f</option>
<option value="440" style="color:440;">440</option>
<option value="444" style="color:444;">444</option>

<option value="447" style="color:447;">447</option>
<option value="449" style="color:449;">449</option>
<option value="44a" style="color:44a;">44a</option>
<option value="44c" style="color:44c;">44c</option>
<option value="44f" style="color:44f;">44f</option>
<option value="470" style="color:470;">470</option>

<option value="474" style="color:474;">474</option>
<option value="477" style="color:477;">477</option>
<option value="479" style="color:479;">479</option>
<option value="47a" style="color:47a;">47a</option>
<option value="47c" style="color:47c;">47c</option>
<option value="47f" style="color:47f;">47f</option>

<option value="490" style="color:490;">490</option>
<option value="494" style="color:494;">494</option>
<option value="497" style="color:497;">497</option>
<option value="499" style="color:499;">499</option>
<option value="49a" style="color:49a;">49a</option>
<option value="49c" style="color:49c;">49c</option>

<option value="49f" style="color:49f;">49f</option>
<option value="4a0" style="color:4a0;">4a0</option>
<option value="4a4" style="color:4a4;">4a4</option>
<option value="4a7" style="color:4a7;">4a7</option>
<option value="4a9" style="color:4a9;">4a9</option>
<option value="4aa" style="color:4aa;">4aa</option>

<option value="4ac" style="color:4ac;">4ac</option>
<option value="4af" style="color:4af;">4af</option>
<option value="4c0" style="color:4c0;">4c0</option>
<option value="4c4" style="color:4c4;">4c4</option>
<option value="4c7" style="color:4c7;">4c7</option>
<option value="4c9" style="color:4c9;">4c9</option>

<option value="4ca" style="color:4ca;">4ca</option>
<option value="4cc" style="color:4cc;">4cc</option>
<option value="4cf" style="color:4cf;">4cf</option>
<option value="4f0" style="color:4f0;">4f0</option>
<option value="4f4" style="color:4f4;">4f4</option>
<option value="4f7" style="color:4f7;">4f7</option>

<option value="4f9" style="color:4f9;">4f9</option>
<option value="4fa" style="color:4fa;">4fa</option>
<option value="4fc" style="color:4fc;">4fc</option>
<option value="4ff" style="color:4ff;">4ff</option>
<option value="700" style="color:700;">700</option>
<option value="704" style="color:704;">704</option>

<option value="707" style="color:707;">707</option>
<option value="709" style="color:709;">709</option>
<option value="70a" style="color:70a;">70a</option>
<option value="70c" style="color:70c;">70c</option>
<option value="70f" style="color:70f;">70f</option>
<option value="740" style="color:740;">740</option>

<option value="744" style="color:744;">744</option>
<option value="747" style="color:747;">747</option>
<option value="749" style="color:749;">749</option>
<option value="74a" style="color:74a;">74a</option>
<option value="74c" style="color:74c;">74c</option>
<option value="74f" style="color:74f;">74f</option>

<option value="770" style="color:770;">770</option>
<option value="774" style="color:774;">774</option>
<option value="777" style="color:777;">777</option>
<option value="779" style="color:779;">779</option>
<option value="77a" style="color:77a;">77a</option>
<option value="77c" style="color:77c;">77c</option>

<option value="77f" style="color:77f;">77f</option>
<option value="790" style="color:790;">790</option>
<option value="794" style="color:794;">794</option>
<option value="797" style="color:797;">797</option>
<option value="799" style="color:799;">799</option>
<option value="79a" style="color:79a;">79a</option>

<option value="79c" style="color:79c;">79c</option>
<option value="79f" style="color:79f;">79f</option>
<option value="7a0" style="color:7a0;">7a0</option>
<option value="7a4" style="color:7a4;">7a4</option>
<option value="7a7" style="color:7a7;">7a7</option>
<option value="7a9" style="color:7a9;">7a9</option>

<option value="7aa" style="color:7aa;">7aa</option>
<option value="7ac" style="color:7ac;">7ac</option>
<option value="7af" style="color:7af;">7af</option>
<option value="7c0" style="color:7c0;">7c0</option>
<option value="7c4" style="color:7c4;">7c4</option>
<option value="7c7" style="color:7c7;">7c7</option>

<option value="7c9" style="color:7c9;">7c9</option>
<option value="7ca" style="color:7ca;">7ca</option>
<option value="7cc" style="color:7cc;">7cc</option>
<option value="7cf" style="color:7cf;">7cf</option>
<option value="7f0" style="color:7f0;">7f0</option>
<option value="7f4" style="color:7f4;">7f4</option>

<option value="7f7" style="color:7f7;">7f7</option>
<option value="7f9" style="color:7f9;">7f9</option>
<option value="7fa" style="color:7fa;">7fa</option>
<option value="7fc" style="color:7fc;">7fc</option>
<option value="7ff" style="color:7ff;">7ff</option>
<option value="900" style="color:900;">900</option>

<option value="904" style="color:904;">904</option>
<option value="907" style="color:907;">907</option>
<option value="909" style="color:909;">909</option>
<option value="90a" style="color:90a;">90a</option>
<option value="90c" style="color:90c;">90c</option>
<option value="90f" style="color:90f;">90f</option>

<option value="940" style="color:940;">940</option>
<option value="944" style="color:944;">944</option>
<option value="947" style="color:947;">947</option>
<option value="949" style="color:949;">949</option>
<option value="94a" style="color:94a;">94a</option>
<option value="94c" style="color:94c;">94c</option>

<option value="94f" style="color:94f;">94f</option>
<option value="970" style="color:970;">970</option>
<option value="974" style="color:974;">974</option>
<option value="977" style="color:977;">977</option>
<option value="979" style="color:979;">979</option>
<option value="97a" style="color:97a;">97a</option>

<option value="97c" style="color:97c;">97c</option>
<option value="97f" style="color:97f;">97f</option>
<option value="990" style="color:990;">990</option>
<option value="994" style="color:994;">994</option>
<option value="997" style="color:997;">997</option>
<option value="999" style="color:999;">999</option>

<option value="99a" style="color:99a;">99a</option>
<option value="99c" style="color:99c;">99c</option>
<option value="99f" style="color:99f;">99f</option>
<option value="9a0" style="color:9a0;">9a0</option>
<option value="9a4" style="color:9a4;">9a4</option>
<option value="9a7" style="color:9a7;">9a7</option>

<option value="9a9" style="color:9a9;">9a9</option>
<option value="9aa" style="color:9aa;">9aa</option>
<option value="9ac" style="color:9ac;">9ac</option>
<option value="9af" style="color:9af;">9af</option>
<option value="9c0" style="color:9c0;">9c0</option>
<option value="9c4" style="color:9c4;">9c4</option>

<option value="9c7" style="color:9c7;">9c7</option>
<option value="9c9" style="color:9c9;">9c9</option>
<option value="9ca" style="color:9ca;">9ca</option>
<option value="9cc" style="color:9cc;">9cc</option>
<option value="9cf" style="color:9cf;">9cf</option>
<option value="9f0" style="color:9f0;">9f0</option>

<option value="9f4" style="color:9f4;">9f4</option>
<option value="9f7" style="color:9f7;">9f7</option>
<option value="9f9" style="color:9f9;">9f9</option>
<option value="9fa" style="color:9fa;">9fa</option>
<option value="9fc" style="color:9fc;">9fc</option>
<option value="9ff" style="color:9ff;">9ff</option>

<option value="a00" style="color:a00;">a00</option>
<option value="a04" style="color:a04;">a04</option>
<option value="a07" style="color:a07;">a07</option>
<option value="a09" style="color:a09;">a09</option>
<option value="a0a" style="color:a0a;">a0a</option>
<option value="a0c" style="color:a0c;">a0c</option>

<option value="a0f" style="color:a0f;">a0f</option>
<option value="a40" style="color:a40;">a40</option>
<option value="a44" style="color:a44;">a44</option>
<option value="a47" style="color:a47;">a47</option>
<option value="a49" style="color:a49;">a49</option>
<option value="a4a" style="color:a4a;">a4a</option>

<option value="a4c" style="color:a4c;">a4c</option>
<option value="a4f" style="color:a4f;">a4f</option>
<option value="a70" style="color:a70;">a70</option>
<option value="a74" style="color:a74;">a74</option>
<option value="a77" style="color:a77;">a77</option>
<option value="a79" style="color:a79;">a79</option>

<option value="a7a" style="color:a7a;">a7a</option>
<option value="a7c" style="color:a7c;">a7c</option>
<option value="a7f" style="color:a7f;">a7f</option>
<option value="a90" style="color:a90;">a90</option>
<option value="a94" style="color:a94;">a94</option>
<option value="a97" style="color:a97;">a97</option>

<option value="a99" style="color:a99;">a99</option>
<option value="a9a" style="color:a9a;">a9a</option>
<option value="a9c" style="color:a9c;">a9c</option>
<option value="a9f" style="color:a9f;">a9f</option>
<option value="aa0" style="color:aa0;">aa0</option>
<option value="aa4" style="color:aa4;">aa4</option>

<option value="aa7" style="color:aa7;">aa7</option>
<option value="aa9" style="color:aa9;">aa9</option>
<option value="aaa" style="color:aaa;">aaa</option>
<option value="aac" style="color:aac;">aac</option>
<option value="aaf" style="color:aaf;">aaf</option>
<option value="ac0" style="color:ac0;">ac0</option>

<option value="ac4" style="color:ac4;">ac4</option>
<option value="ac7" style="color:ac7;">ac7</option>
<option value="ac9" style="color:ac9;">ac9</option>
<option value="aca" style="color:aca;">aca</option>
<option value="acc" style="color:acc;">acc</option>
<option value="acf" style="color:acf;">acf</option>

<option value="af0" style="color:af0;">af0</option>
<option value="af4" style="color:af4;">af4</option>
<option value="af7" style="color:af7;">af7</option>
<option value="af9" style="color:af9;">af9</option>
<option value="afa" style="color:afa;">afa</option>
<option value="afc" style="color:afc;">afc</option>

<option value="aff" style="color:aff;">aff</option>
<option value="c00" style="color:c00;">c00</option>
<option value="c04" style="color:c04;">c04</option>
<option value="c07" style="color:c07;">c07</option>
<option value="c09" style="color:c09;">c09</option>
<option value="c0a" style="color:c0a;">c0a</option>

<option value="c0c" style="color:c0c;">c0c</option>
<option value="c0f" style="color:c0f;">c0f</option>
<option value="c40" style="color:c40;">c40</option>
<option value="c44" style="color:c44;">c44</option>
<option value="c47" style="color:c47;">c47</option>
<option value="c49" style="color:c49;">c49</option>

<option value="c4a" style="color:c4a;">c4a</option>
<option value="c4c" style="color:c4c;">c4c</option>
<option value="c4f" style="color:c4f;">c4f</option>
<option value="c70" style="color:c70;">c70</option>
<option value="c74" style="color:c74;">c74</option>
<option value="c77" style="color:c77;">c77</option>

<option value="c79" style="color:c79;">c79</option>
<option value="c7a" style="color:c7a;">c7a</option>
<option value="c7c" style="color:c7c;">c7c</option>
<option value="c7f" style="color:c7f;">c7f</option>
<option value="c90" style="color:c90;">c90</option>
<option value="c94" style="color:c94;">c94</option>

<option value="c97" style="color:c97;">c97</option>
<option value="c99" style="color:c99;">c99</option>
<option value="c9a" style="color:c9a;">c9a</option>
<option value="c9c" style="color:c9c;">c9c</option>
<option value="c9f" style="color:c9f;">c9f</option>
<option value="ca0" style="color:ca0;">ca0</option>

<option value="ca4" style="color:ca4;">ca4</option>
<option value="ca7" style="color:ca7;">ca7</option>
<option value="ca9" style="color:ca9;">ca9</option>
<option value="caa" style="color:caa;">caa</option>
<option value="cac" style="color:cac;">cac</option>
<option value="caf" style="color:caf;">caf</option>

<option value="cc0" style="color:cc0;">cc0</option>
<option value="cc4" style="color:cc4;">cc4</option>
<option value="cc7" style="color:cc7;">cc7</option>
<option value="cc9" style="color:cc9;">cc9</option>
<option value="cca" style="color:cca;">cca</option>
<option value="ccc" style="color:ccc;">ccc</option>

<option value="ccf" style="color:ccf;">ccf</option>
<option value="cf0" style="color:cf0;">cf0</option>
<option value="cf4" style="color:cf4;">cf4</option>
<option value="cf7" style="color:cf7;">cf7</option>
<option value="cf9" style="color:cf9;">cf9</option>
<option value="cfa" style="color:cfa;">cfa</option>

<option value="cfc" style="color:cfc;">cfc</option>
<option value="cff" style="color:cff;">cff</option>
<option value="f00" style="color:f00;">f00</option>
<option value="f04" style="color:f04;">f04</option>
<option value="f07" style="color:f07;">f07</option>
<option value="f09" style="color:f09;">f09</option>

<option value="f0a" style="color:f0a;">f0a</option>
<option value="f0c" style="color:f0c;">f0c</option>
<option value="f0f" style="color:f0f;">f0f</option>
<option value="f40" style="color:f40;">f40</option>
<option value="f44" style="color:f44;">f44</option>
<option value="f47" style="color:f47;">f47</option>

<option value="f49" style="color:f49;">f49</option>
<option value="f4a" style="color:f4a;">f4a</option>
<option value="f4c" style="color:f4c;">f4c</option>
<option value="f4f" style="color:f4f;">f4f</option>
<option value="f70" style="color:f70;">f70</option>
<option value="f74" style="color:f74;">f74</option>

<option value="f77" style="color:f77;">f77</option>
<option value="f79" style="color:f79;">f79</option>
<option value="f7a" style="color:f7a;">f7a</option>
<option value="f7c" style="color:f7c;">f7c</option>
<option value="f7f" style="color:f7f;">f7f</option>
<option value="f90" style="color:f90;">f90</option>

<option value="f94" style="color:f94;">f94</option>
<option value="f97" style="color:f97;">f97</option>
<option value="f99" style="color:f99;">f99</option>
<option value="f9a" style="color:f9a;">f9a</option>
<option value="f9c" style="color:f9c;">f9c</option>
<option value="f9f" style="color:f9f;">f9f</option>

<option value="fa0" style="color:fa0;">fa0</option>
<option value="fa4" style="color:fa4;">fa4</option>
<option value="fa7" style="color:fa7;">fa7</option>
<option value="fa9" style="color:fa9;">fa9</option>
<option value="faa" style="color:faa;">faa</option>
<option value="fac" style="color:fac;">fac</option>

<option value="faf" style="color:faf;">faf</option>
<option value="fc0" style="color:fc0;">fc0</option>
<option value="fc4" style="color:fc4;">fc4</option>
<option value="fc7" style="color:fc7;">fc7</option>
<option value="fc9" style="color:fc9;">fc9</option>
<option value="fca" style="color:fca;">fca</option>

<option value="fcc" style="color:fcc;">fcc</option>
<option value="fcf" style="color:fcf;">fcf</option>
<option value="ff0" style="color:ff0;">ff0</option>
<option value="ff4" style="color:ff4;">ff4</option>
<option value="ff7" style="color:ff7;">ff7</option>
<option value="ff9" style="color:ff9;">ff9</option>

<option value="ffa" style="color:ffa;">ffa</option>
<option value="ffc" style="color:ffc;">ffc</option>
<option value="fff" style="color:fff;">fff</option>
</select>



Posted by Jukka K. Korpela on January 31, 2005, 12:15 am
Please log in for more thread options
 lkrubner@geocities.com wrote:

> I'm facing an extremely irksome bug in FireFox. This select tag is not
> rendering quite right.

Define "right". You are using syntactically incorrect CSS, such as
color:000, which conforming browsers are required to ignore.

> When I click on it to choose a color, it shows a
> scroll tab, but the scroll only goes down to the 43 option and ends
> with f0f.

That's interesting, but it's really about implementation of functionality
rather than rendering.

On the other hand, using select in such a situation is inadequate. Surely
it is faster to type three hex digits than to find an item from a list
containing dozens of entries.

> However, I find that when I use the arrow keys, I can still
> walk through the whole list. It just isn't visible. Considering the
> javascript involved, this is a limiting bug.

Why would that be a bug? The HTML specifications do not define how select
elements work, i.e. the specific methods of interaction. A browser could
implement a select element in a purely voice-based manner, for example (and
speech browsers actually do half of that).

Besides, you didn't post a URL. If you expect others to help you with your
problem, you should do some minimum work to make it easier to them, e.g. by
posting the URL of a complete demo document, not code snippets.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html



Posted by lkrubner on January 30, 2005, 11:52 pm
Please log in for more thread options
-----------------------------
Define "right". You are using syntactically incorrect CSS, such as
color:000, which conforming browsers are required to ignore.
-----------------------------

Thanks much for pointing out the lack of the #. That helps.


----------------------------
That's interesting, but it's really about implementation of
functionality
rather than rendering.
----------------------------

I think you misunderstand me. Only 2% of the options show, and then
there is a scroll bar. Normally one is able to reach 100% of the
options by using the scroll bar. However, there is a bug in FireFox, as
near as I can tell. Using the scroll bar I can only reach about 10% of
what the source code plainly shows is there.


---------------------------
Why would that be a bug?
---------------------------

Because the Javascript function is being called onChange(). Rather
useless if the user has to use the arrow key to make their selection,
as the Javascript will write something to the text area every time they
hit an arrow key.


----------------------------------
Besides, you didn't post a URL. If you expect others to help you with
your
problem, you should do some minimum work to make it easier to them,
e.g. by
posting the URL of a complete demo document, not code snippets.
---------------------------------

So sorry. We've put up a demo and debugging site for the public to
view. Go here:

http://www.publicpen.com/designer/mcControlPanel.php

You'll need a username and password to get in. Use these:

username: designer
password: designer123

You'll see the text area on the lower right and the formatting buttons
just above it. For now, the javascript only works in IE and FireFox on
the PC.

One other bug I've noticed, at least in FireFox, the text in the
selects are showing up with odd colors, seeming qute different from
what you'd expect. 004 should look dark, but doesn't.



Posted by Harlan Messinger on January 31, 2005, 7:24 am
Please log in for more thread options
lkrubner@geocities.com wrote:
> Because the Javascript function is being called onChange(). Rather
> useless if the user has to use the arrow key to make their selection,
> as the Javascript will write something to the text area every time they
> hit an arrow key.

Some people *do* have to use the keyboard for *everything* because they
are unable to use a mouse or other pointing device. Others prefer to
because it's easier for them to use the keyboard to fill out an entire
form than to keep switching back and forth between keyboard and mouse.
It's important to avoid any feature that will break when the keyboard is
used instead of the mouse.


Posted by lkrubner on February 2, 2005, 5:35 pm
Please log in for more thread options
Well, I think from this thread its clear that this is a set of options
that won't be available for every browser, nor for every user. I think
the best we can do is to try to cover as many potentialities as
possible.



Similar ThreadsPosted
when ? can text input be on the fly select also ? March 28, 2006, 1:48 am
Option Select + input field in one October 3, 2007, 8:18 pm
INPUT element not allowed in form, can't find my error July 8, 2004, 11:08 am
in Firefox March 19, 2008, 9:57 pm
W3C validator error isn't really an error? September 13, 2005, 1:21 am
& in one action? April 4, 2005, 6:34 am
Select on my DIV November 16, 2005, 4:16 pm
DIV not recognized by Firefox - It works only in IE - How to replace it for Firefox? May 8, 2007, 5:13 pm
February 19, 2005, 10:21 pm
Very Long Select !!! May 10, 2006, 2:13 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap