How to change the size of a drop-down menu

Discussion in 'HTML' started by Cliff R., Dec 3, 2003.

  1. Cliff R.

    Cliff R. Guest

    Hi, I'm a bit stumped on this one, how can I change the size of a
    drop-down menu? Either making the text smaller or the whole box
    smaller? I've tried making the font size smaller using the option tag
    in the stylesheet but it's not working. Sample code below... Thank
    you!

    <select name="menu">
    <option value="index.htm" size=1 SELECTED>Choose an Item</option>
    <option value="1.htm">item 1</option>
    <option value="2.htm">item 2</option></select>
     
    Cliff R., Dec 3, 2003
    #1
    1. Advertising

  2. Cliff R. wrote:
    > Hi, I'm a bit stumped on this one, how can I change the size of a
    > drop-down menu? Either making the text smaller or the whole box
    > smaller? I've tried making the font size smaller using the option tag
    > in the stylesheet but it's not working. Sample code below... Thank
    > you!
    >
    > <select name="menu">
    > <option value="index.htm" size=1 SELECTED>Choose an Item</option>
    > <option value="1.htm">item 1</option>
    > <option value="2.htm">item 2</option></select>


    this does not work.....
    <style type="text/css">
    #name {
    width: 250;}
    </style>

    but this does work....

    <style type="text/css">
    select {
    width: 250;}
    </style>
     
    Disco Octopus, Dec 3, 2003
    #2
    1. Advertising

  3. Cliff R.

    Guest Guest

    "Cliff R." <> wrote in message
    news:...
    > Hi, I'm a bit stumped on this one, how can I change the size of a
    > drop-down menu? Either making the text smaller or the whole box
    > smaller? I've tried making the font size smaller using the option tag
    > in the stylesheet but it's not working. Sample code below... Thank
    > you!
    >
    > <select name="menu">
    > <option value="index.htm" size=1 SELECTED>Choose an Item</option>
    > <option value="1.htm">item 1</option>
    > <option value="2.htm">item 2</option></select>
    >
    >
    >


    Style Sheets
     
    Guest, Dec 3, 2003
    #3
  4. Cliff R.

    Louis Somers Guest

    Cliff R. <> wrote in
    news::

    > Hi, I'm a bit stumped on this one, how can I change the size of a
    > drop-down menu? Either making the text smaller or the whole box
    > smaller? I've tried making the font size smaller using the option tag
    > in the stylesheet but it's not working. Sample code below... Thank
    > you!


    <html><head>
    <title>FullScreen</title>
    <style type="text/css">
    select {height: 12; width: 100; max-height: 12}
    </style>
    </head>
    <body>
    <form method="post" action="hummm.bee">
    <select name="menu">
    <option value="index.htm" SELECTED>Choose an Item</option>
    <option value="1.htm">item 1</option>
    <option value="2.htm">item 2</option></select>
    </form>
    </body></html>

    Works in Opra, only Height doesn't seem to work in IE, at lease Width does.

    --
    News Updater, No scripts, No Database
    http://www.xmlssoftware.com/NUpdater
     
    Louis Somers, Dec 4, 2003
    #4
  5. Disco Octopus wrote:

    > Cliff R. wrote:
    >
    >> <select name="menu">
    >> <option value="index.htm" size=1 SELECTED>Choose an Item</option>
    >> <option value="1.htm">item 1</option>
    >> <option value="2.htm">item 2</option></select>

    >
    > this does not work.....
    > <style type="text/css">
    > #name {
    > width: 250;}
    > </style>


    Of course it doesn't. "#name" selects the element with ID "name", when you
    want to select the element with name "menu".

    select[name="menu"] might be better, but that's not supported in IE.

    Also, you missed the unit from your width. 250 hobnobs won't fit on most
    screens.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Dec 4, 2003
    #5
  6. Cliff R.

    Mark Parnell Guest

    Mark Parnell, Dec 4, 2003
    #6
  7. Cliff R.

    brucie Guest

    in post <news:Xns9447B32FD9470546179nospamstudent@194.109.133.29>
    Louis Somers said:

    > select {height: 12; width: 100; max-height: 12}


    toby is going to run out of hobnobs at this rate

    --
    brucie
    04/December/2003 10:34:52 am kilo
     
    brucie, Dec 4, 2003
    #7
  8. Cliff R.

    Cliff R. Guest

    On Thu, 4 Dec 2003 11:30:27 +1100, Mark Parnell
    <> wrote:

    >Sometime around Wed, 03 Dec 2003 23:51:40 GMT, Disco Octopus is reported to
    >have stated:
    >>
    >> but this does work....
    >>
    >> <style type="text/css">
    >> select {
    >> width: 250;}
    >> </style>

    >
    >That depends on your definition of "work". 250 what? 250 bunyips?
    >
    >http://www.w3.org/TR/REC-CSS2/syndata.html#length-units


    Thank you -- that does work to change the size of the menu box. What
    about reducing the size of the text within the box? I've tried select
    {font-size:80%;} and option {font-size:80%;} without luck. (Using IE
    6) Anyone? Thank you!
     
    Cliff R., Dec 4, 2003
    #8
  9. Cliff R.

    rf Guest

    "Cliff R." <> wrote in message
    news:...
    > On Thu, 4 Dec 2003 11:30:27 +1100, Mark Parnell
    > <> wrote:
    >
    > >Sometime around Wed, 03 Dec 2003 23:51:40 GMT, Disco Octopus is reported

    to
    > >have stated:
    > >>
    > >> but this does work....
    > >>
    > >> <style type="text/css">
    > >> select {
    > >> width: 250;}
    > >> </style>

    > >
    > >That depends on your definition of "work". 250 what? 250 bunyips?
    > >
    > >http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

    >
    > Thank you -- that does work to change the size of the menu box. What
    > about reducing the size of the text within the box? I've tried select
    > {font-size:80%;} and option {font-size:80%;} without luck. (Using IE
    > 6) Anyone? Thank you!


    Why would you want to make the text 80% of the size I have set as my
    default? I would just up my default to put it back where I like it.

    Cheers
    Richard.
     
    rf, Dec 4, 2003
    #9
  10. Cliff R.

    Louis Somers Guest

    brucie <> wrote in news:bqlvht$24eomf$1@ID-
    117621.news.uni-berlin.de:

    > in post <news:Xns9447B32FD9470546179nospamstudent@194.109.133.29>
    > Louis Somers said:
    >
    >> select {height: 12; width: 100; max-height: 12}

    >
    > toby is going to run out of hobnobs at this rate
    >


    Ok, correction:

    <style type="text/css">
    select {height: 12px; width: 100px; max-height: 12px}
    </style>

    --
    News Updater, No scripts, No Database
    http://www.xmlssoftware.com/NUpdater
     
    Louis Somers, Dec 4, 2003
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    815
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,069
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    544
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    315
  5. Replies:
    3
    Views:
    319
Loading...

Share This Page