473,387 Members | 1,585 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

error in FireFox with SELECT input


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>

Jul 23 '05 #1
11 5415
lk******@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

Jul 23 '05 #2
lk******@geocities.com wrote :
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="fff" style="color:fff;">fff</option> ...........
</select>


I can not reproduce your problem, but I did find this....

Try this instead of what you had re the colour changes .....

<option value="#000" style="color:#000;">#000</option>
<option value="#fff" style="color:#fff;">#fff</option>

--
if the oil light is on, dont think it will just go away

Jul 23 '05 #3
-----------------------------
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.

Jul 23 '05 #4
lk******@geocities.com wrote:

Could you please attribute quoted material as per normal usenet
convention?
---------------------------
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.
Doesn't that suggest a problem to you? There are multiple ways of
using a select element but your select element only "works" for one of
them. That's poor design.
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.
In Opera I get a popup box asking me what colour I want but the JS to
insert the code into the text area works just fine.

Yuck <div> and <span> soup. I hope the code generated by this isn't
going out onto the WWW. Indeed as the colour picker process is JS
driven I hope this generator thingy isn't going out onto the WWW.
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.
No problems with Firefox 1.0 on WinXPSP2, which version of FF on which
OS is giving you problems?
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.


Looks correct here.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 23 '05 #5
lk******@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.
Jul 23 '05 #6
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.

Jul 23 '05 #7
> Could you please attribute quoted material as per normal usenet
convention?
I wish I could, but I reach this newsgroup through Google Groups.
Google just recently changed the interface in ways that I find
extremely confusing. It used to be that when I hit reply they
automatically quoted the text of whatever I was responding to, and they
let me cut out what text was unneeded from the quote. Now I'm not sure
what is going on. Either they quote nothing or I'm not seeing the text
that is being quoted. I'll try to put the brackets in by hand.
Yuck <div> and <span> soup. I hope the code generated by this isn't
going out onto the WWW. Indeed as the colour picker process is JS
driven I hope this generator thingy isn't going out onto the WWW.
I feel that's an unfair criticism. Blogger generated this:

<span style="color: rgb(255, 0, 0);">lkjlkjlkjlkjlkjljlkjlkj</span>

I think Blogger (and therefore Google) sets the tone for what is done
with weblog software. Me and some friends are putting together some
open source weblog software, which is what you saw. I think one
response to what you've written might be that if Google does it then
this is what is being done in weblog software. But maybe a better
response might simply be that I can't think of another way to do this.
If you want to give people a way to change text color and background
colors, and these people don't know any HTML and don't want to know any
HTML, then how would you do it, other than allow them to write some
span and div tags? I realize that a lot of div tags could make for some
ugly code. If you can think of another way of doing this, I'd love to
hear it.
No problems with Firefox 1.0 on WinXPSP2, which version of FF on whichOS is giving you problems?


Thanks much for looking. I'm using version 1 preview release,
Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.7.3) Gecko/20040913
Firefox/0.10, on Windows 2000.

Jul 23 '05 #8
> Try this instead of what you had re the colour changes .....
<option value="#000" style="color:#000;">#000</option>
<option value="#fff" style="color:#fff;">#fff</option>

Thanks much. I fixed that bug.

Jul 23 '05 #9
>Yuck <div> and <span> soup. I hope the code generated by this isn't
going out onto the WWW.
The other problem with our current approach is that there is no
protection against non-nested tags. Yesterday I was showing this thing
to one of our beta testers and he did this:

<span style="color:#444">
some text
some text
some text
some text
some text
<div style="background-color:#333">
some text
some text
</span>
some text
some text
some text
</div>

Awful, yes, but off hand I can't think how to protect against it. I
notice Blogger seems to have a lot of checks against really, truly
awful code. I'm not sure how they do it. Maybe some regular expressions
with Javascript? I've never been sure how Dreamweaver and FrontPage
protect against non-nested code. Over the course of the next year I'm
hoping to build more protections against bad code into our software.
I'm not sure where to start. Then again, it is an open source project
and I know very little Javascript. Eventually I'm sure we'll get a
volunteer who wants to help us out with the Javascript, and then I
think things will go faster.
Indeed as the colour picker process is JS
driven I hope this generator thingy isn't going out onto the WWW.


I'm not sure I know what you mean. Is there a way to do this without
using Javascript? Perhaps you're suggesting we use a Java applet
instead? I have thought of that. That would certainly save us some of
the cross browser issues we are wrestling with now. I think this is a
path we will probably pursue, some time later this year, when I have
more time.

Thanks for all the feedback, it is very useful.

Jul 23 '05 #10
lk******@geocities.com wrote:
[mangled tag-soup]

Awful, yes, but off hand I can't think how to protect against it. I
That's easy. Validate at the point where the user tries to save what's
in their editor, and refuse it if not valid. Example: mod_annot.
notice Blogger seems to have a lot of checks against really, truly
awful code.


Ad-hoc checks are a feeble substitute.

--
Nick Kew
Jul 23 '05 #11
lk******@geocities.com wrote:
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.


What's clear is you're not willing to make simple improvements to your
deficient page design when its flaws are drawn to your attention. Just
because something can be done and doesn't violate the formal standards
doesn't mean it *should* be done.
Jul 23 '05 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: debugger | last post by:
hello, Question, on page load, I populate an existing drop down with createElement and appendChild. It works fine so far. BUT I want to automatically select some option from this populated drop...
5
by: Craig Keightley | last post by:
Please help, i have attached my page which worksin IE but i cannnot get the drop down menu to fucntion in firefox. Any one have any ideas why? Many Thanks Craig ...
8
by: McKirahan | last post by:
Firefox does not reflect selected option via innerHTML How do I get Firefox to reflect selected option values? <html> <head> <title>FFinner.htm</title> <script type="text/javascript">...
2
by: cbjewelz | last post by:
Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...
11
by: davecph | last post by:
I'm constructing a website with a layout created with div-tags. They have a fixed width, float left, and display inline. When one of the div's contain a select-element the right-most div floats down...
1
by: nancyisbell | last post by:
I used the following test01.xml file below to exercise the cnlUnit01.xslt. <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="cnlUnit01.xslt"?> <cnlUnitXsl unitDataFile="111111"/> ...
2
by: firstexact | last post by:
Hi guys, First post, hope you can help, I have done two sites www.trisant.co.uk and my own www.firstexact.co.uk. The 2 x 2 grid I originally envisaged goes haywire in Firefox as I get a 4 high by...
5
tjc0ol
by: tjc0ol | last post by:
Hi all, I made contact page which allows visitors to input their name, email address, phone number, comments and select a comment type by using <select> element in html with javascript. Among the...
3
by: SAL | last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps section of either web.config or machine.config but it didn't work. It seems that most pages in my webapp are okay but a...
3
by: graphicssl | last post by:
Okay, so first of all, I'm a designer first and a light coder second (I'm only really trained with HTML and CSS). So I apologize for having to post about something that's probably super-trivial! ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.