Sizing drop down menu inside a table.

<HTML>
  <HEAD>
    <TITLE>DropDownMenu</TITLE>
  </HEAD>
  <BODY>
    <TABLE>
      <TR>
        <TD>
          <SELECT NAME="menu1">
            <OPTION VALUE="0">International Business Machine
            <OPTION VALUE="1">American Telephone & Telegraph
            <OPTION VALUE="2">American OnLine
            <OPTION VALUE="3">Sun Microsystem
          </SELECT>
      <TR>
        <TD>
          <SELECT NAME="menu2">
            <OPTION VALUE="0">IBM
            <OPTION VALUE="1">T
            <OPTION VALUE="2">AOL
            <OPTION VALUE="3">SUNW
          </SELECT>
    </TABLE>
  </BODY>
</HTML>

===========================
When I run the above html, the first drop down menu is much
wider than the second one.  How do I FORCE the second one
to have the same width as the first (without hardcoding the
size)?  In other words, how do I ensure all drop down menus
in the same table column to have the same width of the widest
one?
LVL 1
szetoaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
potentConnect With a Mentor Commented:
Forget CSS as it will only work in IE (or derivatives like AOL, NeoPlanet, etc.) and forget your code as it will only work on the same. It must have a FORM tag (closing and ending) for it to work in any Netscape or most other Browsers.

There is only one way to do what you want, and have it appear the same way with "all" Browsers, like so:

&lt;BODY&gt;
&lt;TABLE&gt;
&lt;TR&gt;
&lt;TD&gt;

&lt;FORM&gt;
&lt;SELECT NAME="menu1"&gt;
&lt;OPTION&gt;-- Please Choose From The Following --
&lt;OPTION VALUE="0"&gt;International Business Machine
&lt;OPTION VALUE="1"&gt;American Telephone & Telegraph
&lt;OPTION VALUE="2"&gt;American OnLine
&lt;OPTION VALUE="3"&gt;Sun Microsystem
&lt;/SELECT&gt;

&lt;P&gt;

&lt;SELECT NAME="menu2"&gt;
&lt;OPTION&gt;-- Please Choose From The Following --
&lt;OPTION VALUE="0"&gt;IBM
&lt;OPTION VALUE="1"&gt;T
&lt;OPTION VALUE="2"&gt;AOL
&lt;OPTION VALUE="3"&gt;SUNW
&lt;/SELECT&gt;
&lt;/FORM&gt;

&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;

&lt;/BODY&gt;

By creating a null Option, you can type whatever you want for both Select tags. This is the only way to do it so that they both look the same in "all" Browsers.

Haven't typed HTML code into an answer before so using ASCII for less than and greater than angle brackets. If it doesn't work, at least you'll know what I mean.


Website Rob
----------------
Helping people create
a Potent Website

0
 
oubelkasCommented:
It isn't possible to determine what the width of the widest box is, therefore you must give the width hard to the selects, so in this case :
<SELECT NAME="menu2" STYLE="width:230">

J.
0
 
oubelkasCommented:
You can use a stylesheet to make sure all the dropdown boxes are always the same length :

<style type="text/css">
<!--
select { width:230; }
// -->
</style>

put this between <head> </head> tags. This way you yourself must determine the widest box and give this width in the style sheet. In this style sheet you can also declare more things like the following :

select {height: 14pt; font-size: 9pt;  font-family: Arial, Helvetica, sans-serif; background-color: #EEEEEE; }

See if this helps.

J.


0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
potentCommented:
Well, there was a learning experience for me! Let's try this:

<BODY>
<TABLE>
<TR>
<TD>

<FORM>
<SELECT NAME="menu1">
<OPTION>-- Please Choose From The Following --
<OPTION VALUE="0">International Business Machine
<OPTION VALUE="1">American Telephone & Telegraph
<OPTION VALUE="2">American OnLine
<OPTION VALUE="3">Sun Microsystem
</SELECT>

<P>

<SELECT NAME="menu2">
<OPTION>-- Please Choose From The Following --
<OPTION VALUE="0">IBM
<OPTION VALUE="1">T
<OPTION VALUE="2">AOL
<OPTION VALUE="3">SUNW
</SELECT>
</FORM>

</TD></TR>
</TABLE>

</BODY>
0
 
oubelkasCommented:
it's true what potent says about CSS not working in NS, but if you use IE, then this is a good solution.

J.
0
 
szetoaAuthor Commented:
oubelkas and potent,

I am looking into your solutions.  Will get back to you very soon.

szetoa
0
 
szetoaAuthor Commented:
Oubelkas,

    Actually, your answer was what I am looking for.  Although I may have problem if the text string is longer than the width specified.  But I can always adjust the width to handle the longest string.

Potent,

    Your solution was also good, except I cannot use a null option.  And I cannot create a null option which is long enough to cover all cases (my web page has > 30 menus).

Here's what I would do.  I will grade this answer and I will also post a question just for Oubelkas.  Thanks so much for your help.

A.
0
 
potentCommented:
I didn't realize you code your pages only for IE as that is not what you stated in your question. Since my answer works on all systems and Browsers, and Oubelkas does not, I object to your conclusion on that basis.

BTW - A null option is created with the simple insertion of it. I only called the function by it's correct name, not intending to confuse.


Website Rob
----------------
Helping people create
a Potent Website

0
 
potentCommented:
Thank You Szetoa. Just caught up with my Mail and having hard typing this, because my foot is in my mouth :-(

Let me know if you need some help (if you're using JS or Perl) and you can reach me at potentproducts@bigfoot.com


Website Rob
----------------
Helping people create
a Potent Website

0
 
szetoaAuthor Commented:
Potent,

  You are absolutely right about the page is for IE only.  As I started my application, I had both IE and NN in mind.  Since this is not a general web page for the public and my users had requested a lot of features, and not to mention that a lot of things that NN did not support, I ended up forgetting NN totally.  For example, NN does not support any event in <SELECT> and I need to do a lot of things when an option is selected.  Luckily for me, my users standard is IE.

A.
0
 
oubelkasCommented:
szetoa > thx...

and potent > chill aight! Just don't drill somebody's comment into the ground, this isn't a competition, we're justing helping other people's problems, so it's up to the person of the question to verify somebody's comment or answer....

J.
0
 
potentCommented:
aight


Website Rob
----------------
Helping people create
a Potent Website

0
All Courses

From novice to tech pro — start learning today.