jQuery-UI Theming - CSS Sizing Differences

When using the jQueryUI samples on the website (theme browser) things look great. But, when I put the code and theme into my application, the sizing is way out of whack (I'm trying to utilize the Redmond theme).

Any ideas as to why these samples look so different? In the application I've built, there is only 1 CSS reference which is for the Redmond theme... These images below are exactly how they were rendered to the browser.

My Application:

jQuery UI Sample:

My Application Code:

<div>
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#<%= txtDateSample.ClientID %>').datepicker({
            showButtonPanel: true,
            showOn: 'button',
            buttonImage: '../Graphics/Icons/calendar.png',
            buttonImageOnly: true
        });
    });
</script>

Firebug View of Div:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>

From stackoverflow

• This used to happen to me. It is because some of your styles are inadvertently affecting the calendar div. Get Firebug and check out what styles are being applied to the calendar. Then edit the theme to override anything your styles are doing.

  EDIT:

  The part you are looking for is not the HTML generated, although that is important, it is more of what styles are actually being applied:

  

  You will see styles that are being applied while styles that have been assigned but are not being applied will be shown struck out. You will probably see some of your styles in this window. They are most likely the culprit. Fix them by making them more specific and your calendar should be good to go.

  RSolberg : I wonder if that is why they provide the "edit theme" functionality. Modified the font size and that seemed to do the trick.

  Paolo Bergantino : Ah, good. I guess my edit was for nothing then. :)

  RSolberg : Thanks. I'll look at this again later tonight. I believe it was the font size setting on the theme. 1.1em vs. small.

• When things are smaller than you expect, a good assumption would be that some kind of percentage/proportional sizing is happening recursively, i.e. that you've got

  .foo {width: 80%;}
  

  somewhere and that has been applied twice or more, meaning that your width ends up at 80% of 80% of 80%.