1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

No scrollbar on HTML drop-down?

Discussion in 'HTML & Website Design' started by Dji-man, Sep 21, 2004.

0
Page 1 of 2
  1. #1
    Hi guys,

    Is is possible to specify the height of an html drop-down menu to get rid of the scrollbar in IE? I have a list of months, in Firefox there is no scrollbar, but it's there in IE, but only to allow to scroll to see the last month.

    It this an IE bug or can I force a height to the drop-down to get rid of the scrollbar?

    Thanks
     
    Dji-man, Sep 21, 2004 IP
  2. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #2
    How many options are you displaying? On winXP IE 6.0 It displays 30 options before adding a scrollbar.
    <html><body><form><select>
<?php
for( $i=0; $i<30; ++$i )  // when I change this to more than 30, I get a scrollbar.
  echo "<option>asdf</option>";
?>
</select></form></body></html>
    Code (markup):
    What's the URI of the example, so I can see how it shows up on my box?
     
    exam, Sep 21, 2004 IP
  3. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks Exam,

    I have all 12 months. IE 6 display only 11 @1024*768 and 1280*1024, then adds a scrollbar whereas Mozilla/Firefox displays all 12. I can't use php, asp, jsp or any other advanced scripting, only html and javascript (I know, I know, don't ask why) :(

    Thanks for your help,
     
    Dji-man, Sep 21, 2004 IP
  4. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you use this in your head...

    <!--[if gte IE 4]>
<link rel="stylesheet" href="/styles/ie.css" type="text/css" />
<![endif]-->
    Code (markup):
    It means that any ie browser (higher than ie4) will look at a seperate CSS file.

    You only need to include the styles that you want to change in the ie file, it will look at the other stylesheet for all of the other information.
     
    SEbasic, Sep 22, 2004 IP
    Colleen likes this.
  5. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #5
    In my IE6 it shows 30 before adding a scrollbar. I believe you cannot change this with HTML or Javascript, but you might check out CSS as a way of modifying it. I have no idea really.
     
    exam, Sep 22, 2004 IP
  6. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for you help Exam.

    I'll add this bug to my list of reasons why IE sucks.
     
    Dji-man, Sep 22, 2004 IP
  7. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Just use the code I gave you to style the dropdown...
     
    SEbasic, Sep 22, 2004 IP
  8. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks SEbasic,

    But what should I add to my IE specific CSS to have it to display all 12 months without the scrollbar, instead of 11 + scrollbar?
     
    Dji-man, Sep 22, 2004 IP
  9. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Are you currently using styles to specify the height of the dropdown?

    Basically, you would have 2 stylesheets. The normal one, and the ie one.

    In the normal one are all of the styles that you have made for the page as it stands.

    In the ie one, all you need to include is the style you have used for the dropdown, then you can change the specified height in there. Are there any links I can see for the page?
     
    SEbasic, Sep 23, 2004 IP
  10. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Here's my code for my drop-down :

    <select name="ma" onChange="changeSelect(this)">
<OPTION value="1">january</OPTION>
<OPTION value="2">february</OPTION>
<OPTION value="3">march</OPTION>
<OPTION value="4">april</OPTION>
<OPTION value="5">may</OPTION>
<OPTION value="6">june</OPTION>
<OPTION value="7">july</OPTION>
<OPTION value="8">august</OPTION>
<OPTION value="9">september</OPTION>
<OPTION value="10">october</OPTION>
<OPTION value="11">november</OPTION>
<OPTION value="12">december</OPTION>
</select>
    Code (markup):
    I tried adding style="height:600" to <Select>, but nothing happens. :(
     
    Dji-man, Sep 23, 2004 IP
  11. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Try height: 12em;

    Also check here for other length units.
     
    exam, Sep 23, 2004 IP
  12. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Try: 

    <select name="ma" class="menu" onChange="changeSelect(this)">
<OPTION value="1">january</OPTION>
<OPTION value="2">february</OPTION>
<OPTION value="3">march</OPTION>
<OPTION value="4">april</OPTION>
<OPTION value="5">may</OPTION>
<OPTION value="6">june</OPTION>
<OPTION value="7">july</OPTION>
<OPTION value="8">august</OPTION>
<OPTION value="9">september</OPTION>
<OPTION value="10">october</OPTION>
<OPTION value="11">november</OPTION>
<OPTION value="12">december</OPTION>
</select>
    Code (markup):
    And in the CSS

    .menu {
height: 600px;
}
    Code (markup):
    That is probabally a little better...
     
    SEbasic, Sep 23, 2004 IP
  13. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #13
    > 600px
    why use absolutes when you can use relatives? Especially if the font size changes...
     
    exam, Sep 23, 2004 IP
  14. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Yeah, Whatever... Absolute, Relative - Ut's all good - I was just trying to get the CSS to reference the dropdown properly
     
    SEbasic, Sep 23, 2004 IP
  15. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Already tried both absolute and relative and it doesn't make any difference. I looked for examples on other sites and they all seems to have the same problem. Have you seen a site where the drop-down in IE display more than 11 items?

    It's not the end of the world if it doesn't work, but for usability reasons, I think it would be better if all 12 months would be displayed without the scrollbar. Otherwise, I use the old lame reason if someone complains, "it's your browser..."

    Thanks for you help guys,
     
    Dji-man, Sep 23, 2004 IP
  16. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Yes, at my dictionary, at the bottom of the "Add to the dictionary" form, the drop down lists for parts of speech have 14 and 10 items respectively. They are displayed w/o scrollbars in my browser.
     
    exam, Sep 24, 2004 IP
  17. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Thanks, but sorry, I see a scrollbar in my IE here (with 1 items visible), but not in Mozilla for your spanish part of speech...

    I appreciate your efforts though...
     
    Dji-man, Sep 24, 2004 IP
  18. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #18
    So it's a problem with some versions of IE or with your installation. I just tried it on 7 XP boxes here at work (IE 6) and no scrollbar. Maybe others can check it and post browser/version/os so we can see what exactly is the problem.
     
    exam, Sep 25, 2004 IP
  19. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #19
    XP SP2? I tested on IE6 on 3 Win2k SP3, 1 XP SP1, 1 IE55 Win95, and they give me the same result.

    My IE at home and at work are basic installation. I keep the default settings because I don't use it personnaly, except for testing my sites, and to keep at least 1 browser on my machiens with the same settings as most users who don't know how to change their settings.

    One more reason to drop IE... ;)
     
    Dji-man, Sep 25, 2004 IP
  20. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #20
    hmm.. XP with, guess what? no service packs installed! I will have to let someone know or d/l the updates myself. On your machines, maybe the service packs broke something in IE while fixing something somewhere else. Who knows.
     
    exam, Sep 25, 2004 IP
Page 1 of 2