How do I make a <sub> tag work within a <select> tag? 1

joelevinger · May 28, 2003

Hello,

I am trying to figure out how to make the <sub> and <sup> tags work within the drop-down menu of a form. Since I couldn't get these tags to work within the drop-down menu, I tried using an <img> tag, an inline style sheet, and a <font> tag, but none of these ideas worked either.

Here is the relevant portion of my code:

<form>
<select name="from">
<option value="" selected>Select a unit of measurement
<option value="lnOfH2O">ln. of H<sub>2</sub>O(@39.2<sup>o</sup> F)
</form>

Any ideas on how to make the "2" appear as a subscript and the "o" appear as a superscript in the above example?

Many thanks!

Joe Levinger

EdwardMartinIII · May 28, 2003

Joe,

Would you consider using a radio button cluster? It gives you greater freedom over formatting your text, although if you have a lot of different choices, it can be cumbersome.

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <p>Select a unit of measurement</p>
    <form name=&quot;ThisForm&quot;>
      <input type=&quot;radio&quot; id=&quot;lnOfH2O&quot; name=&quot;TempMeasure&quot; value=&quot;lnOfH2O&quot; checked=&quot;true&quot;>ln. of H<sub>2</sub>O(@39.2<sup>o</sup> F)</input><br />
      <input type=&quot;radio&quot; id=&quot;other&quot; name=&quot;TempMeasure&quot; value=&quot;other&quot; checked=&quot;false&quot;>other</input><br />
    </form>
  </body>
</html>

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

EdwardMartinIII · May 28, 2003

And by the way, you can use

Code:

&amp;deg;
[code]
to produce the degree symbol.

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door.  Hang a flap.  Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

EdwardMartinIII · May 28, 2003

You know, you can use any of the character entities, such as those listed at

http://sunsite.berkeley.edu/amher/iso_8879.html

You made me think about this. Here are three options:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;ThisForm&quot;>
      <p>Select a unit of measurement, using character entities, which is funky for the &quot;2&quot;.</p>
      <select>
        <option>ln. of H&#178;O (@39.2 &#176;F)</option>
        <option>Neptunian method</option>
      </select>
      <p>Select a unit of measurement, using ordinary text</p>
      <select>
        <option>ln. of H2O (@39.2 &#176;F)</option>
        <option>Neptunian method</option>
      </select>
      <p>Select a unit of measurement, using pre-chemistry notation</p>
      <select>
        <option>ln. of water at 39.2 degrees Fahrenheit)</option>
        <option>Neptunian method</option>
      </select>
    </form>
  </body>
</html>

The second one is probably easier, and really, most people know about computer displays limiting for certain things, so chances are good most people are going to see "H2S04" and know you aren't talking mouthwash. [lol]

If you're into anachronisms, you could go the third route.

Too bad there isn't a character entity for subscripted "2".

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

joelevinger · May 29, 2003

Thanks very much, Edward. I chose option #2, as you suggested.

With all best wishes,

Joe

EdwardMartinIII · May 29, 2003

Hi Joe,

Oooh, did I miss out on an obvious goof.

I entered the sample above, but I didn't escape the code, so rather than have it display what I wrote, it rendered the character codes and displayed that.

Just enter your text as it shows on the Berkeley link and you'll be fine.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

FesterSXS · Dec 16, 2003

I have a similar problem - Not only do I need to have the chemical formulae within my dropdowns (H₂0), I also need normal letters appearing as subscript.

eg)
Specific Enthalpy of Water (h_f)
Specific Enthalpy of Evaporation (h_fg)
Specific Entropy of Water (s_f)
Specific Entropy of Evaporation (s_fg)

Is the only way to do this through using character codes? Are there character codes for subscript/superscript letters??

Tony

http://www.SpiraxSarco.com/cad

EdwardMartinIII · Dec 19, 2003

I don't know, but I have my doubts.

Here are some suggestions:

[ol]
[li]Forget about the subscripts and call it like this: Hf, Hfg, Sf, Sfg[/li]
[li]Forget about the shortcuts and refer to "Specific Enthalpy of Water", "Specific Enthalpy of Evaporation", "Specific Entropy of Water", and "Specific Entropy of Evaporation"[/li]
[li]You could do #2 above, but include an obvious "Help on formulas" link that opens a help page which includes illustrations.[/li]
[li]Something else that I just didn't think of[/li]
[/ol]

Hope that helps!

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I make a <sub> tag work within a <select> tag? 1

joelevinger

Programmer

EdwardMartinIII

Technical User

EdwardMartinIII

Technical User

EdwardMartinIII

Technical User

joelevinger

Programmer

EdwardMartinIII

Technical User

FesterSXS

Programmer

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I make a &lt;sub&gt; tag work within a &lt;select&gt; tag? 1

Programmer

Technical User

Technical User

Technical User

Programmer

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor

How do I make a <sub> tag work within a <select> tag? 1