Drop Down Box Not Fully Displayed (All Browsers)

Answer 1

It looks like you are setting "line-height:15px;" on "select" elements. Remove that and see if it fixes the issue.

Answer 2

Thanks for the idea @EndangeredMassa, but that doesn't work. The key also is that the second drop down dose work (same styles applied except for width). And changing the width doesn't help.

Answer 3

If the styles on your elements are all identical for identical types (except for the width), it seems the only likely culprit is the surrounding elements in the page. For example, what's the css/html for that "add another item" link below the problematic drop-down?

Answer 4

I would suggest to check your page with the Firebug plugin in Firefox. It can display and change the CSS style assigned to your element, and you will fix the issue in no time.

Answer 5

It may not be the DDL, but that something else on the page may be covering a part of it. In FireFox, try "Inspecting Element" on the whitespace that is at the bottom of the DDL.

Answer 6

There might be no difference in the dropdowns; however, based on the code you provided, there is a difference in the LIs containing them.

You have a base style set for all list items, but you also have a specific style defined for li.name. I would focus on the div#byitem ul.horz li.name style. There's not enough code for me to reproduce it locally, but my guess would be that display: block is the culprit.

Answer 7

Jeromy is correct, the difference is in the li containing the selects AND the surrounding elements considering you are floating the li's.

Try changing the height for the following style, see what your results are.

div#byitem ul.vert li {
    background:transparent none repeat scroll 0 0;
    height:17px;
    margin:0;
    padding:0;
}

Hopefully that helps you track it down.

Answer 8

Even if it doesn't end up solving the problem, I would strongly recommend pulling the height: declarations off both the li and the select elements. The display sizes will be dependent on the font used by the browser. Because you cannot control what fonts are installed on your users' computers, you cannot guarantee which font will be used by the browser. Those heights will cause you problems sooner or later (and may be the cause of your current problem).