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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
potentCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.