Hello,
I am using the jquery datepicker (http://jqueryui.com/demos/datepicker/).
The datepicker on the demo page is small and compact. However, when I use the datepicker on my site, the calendar is HUGE. I would estimate that each date is using 12 pt font.
How do I get the days to be smaller?
Are you including jquery-ui.css in your CSS declarations?
Also, the example page has a bunch of font-size declarations in its CSS.
They have a font-size of 10pt on the body. Remove that in firebug and youll probably see the same font sizes that your seeing on your page.
The simple answer: You could add a font size in you're css to ".ui-datepicker".
But I think you may have some css rules that are conflicting. You should use the method from Paulo's link to check if this is the case.
jQuery UI has a theme roller that allows you to customize one of the existing themes including the fonts, colors and backgrounds before downloading. You can do other things like set the corner radius, margins and padding.
I'd recommend trying to customize it as much as you can before downloading so you'll have less to tinker when using it on your site.
Remember to set the default font sizes and such for the whole page after you've called the jQuery UI stylesheet.
None of your CSS rules are conflicting - I can verify this with 100% confidence!
The reason for this is because jQuery's demo pages can be VERY misleading. As Seth said, their pages have lots of extra CSS rules added on top of the default library CSS. If you look here:
http://jqueryui.com/demos/demos.css
You will see they are making the base font size considerably smaller, which is the real cause.
I too was getting the same exact issue where I was getting a much larger date picker on my pages than they had on their demo. To confirm it was THEIR CSS which was "conflicting", I used the CSS menu of the Web Developer Toolbar in Firefox to disable the above stated CSS file alone, and then all of the sudden THEIR demo site had large date pickers just the same size as mine.
Thus, the best answer here is incorrect - it is nothing on your end - it is entirely how THEY have decreased the base size. I guarantee you that if you try what I have mentioned here you will find the same thing.
the very top line of jquery.ui.theme.css has the font size
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }