jQuery css does not correctly apply

jQuery css does not correctly apply

Dear Community

I'm facing a problem with the css of the smoothness style.
In the section of the Component containers I found the following piece of css:

  1. /* Component containers LN: 229
    ----------------------------------*/
    .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
    .ui-widget .ui-widget { font-size: 1em; }
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }




Obviously, a ui-widget of the "type" button should have a font-size set to 1em as it is overriden.
Unfortunately this doesn't seem to work. Whether in Internet Explorer neither in Mozilla Firefox.

To keep it simple I just added a simple button to a basic html page with the smothness style linked to it:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <script type="text/javascript">
                $(document).ready(function () {
                    // apply jQueryUI theme
                    $("#theOnlyButton").button();
                });
            </script>
            <div>
                <input type="button" value="Button" id="theOnlyButton" />
            </div>
        </form>
    </body>
    </html>




















I'd appreciate any further help or ideas what could be the reason.

Best regards

Sam