JQuery UI default CSS values to give consistent sizing

Question

Are there a set of default CSS values that should be in place when using JQuery UI elements. I have been working with the datepicker control and initially the control displayed about 3 times the size on the JQuery UI demo site.

This was due to the font size we were setting in our CSS. Setting the property font-size: 62.5%; in the body tag of our CSS fixed the overall width of the date control, but it is still about twice as tall. I presume this is due to some margin or line spacing issues in table elements in our CSS, but have not been able to resolve these completely.

Is there a set of default CSS values and sizes or overrides that should be adhered to that ensures that the JQuery UI elements display correctly given their use of em size references?

Answer 1

I would suggest using a reset.css style sheet on every site to help with cross browser inconsistencies as well as things like this.

Try Eric Meyer's reset