Question

Here’s the page in question: http://bit.ly/m5cyjx

There’s hardly any code or styling. It seems that the jQuery UI elements (in this case – select menu & button) are much too large. By default they should be quite small, not much higher than the max height of this sentence.

I’ve taken the jQuery UI CSS straight from their website, and I have similarly taken the jQuery select menu CSS from that project creator’s website. Even with the default code, there is no change in the problem.

Any help?

Edit Also, there are no arrows on the right of the select menu, as there should be by default. Take a look at the project page: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 1

This is because of the following styling (style.css, line #10):

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 25px;
}

You have very big size for font in #main, and because jQuery UI correctly inherits other styles, the buttons are also big.

Change the above snippet into the following and it will look better (at least buttons):

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 10px;
}