why jquery's ui.css files's font-sizes are bigger than normal?

Question

Im looking at jqueries tabs, datepicker etc and see that font-sizes of the classes added to elements are like 1.1em, 1em which seems big in the page. Why did they do this like that? What is the purpose? http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.theme.css

Solution 1

em is a relativ size and depends on the next fixed font-size up the dom tree. when there is no fixed font-size it defaults to 16px.

so when you change your own css like this

body {
    font-size: 12px;
}

1em means 12px, 2em means 24px and so on.

Solution 2

I usually set the class ui-widget in my css like this

.ui-widget {
    font-size:80%;
}

Solution 3

.ui-widget {
    font-size:75% !important;
}

That code will override the default font-size. Please note the !important attribute to make sure it works.

Solution 4

This is the default style that someone determined, you are free to change it though using ThemeRoller. Just go under font settings on the left and adjust to what you want.

View more solutions

Comments

[Eduard Luca]

Question: why do some widgets place themselves in the body tag, at the end of the DOM? This way I need to change the body's font size, which means to change stuff all around my site. Wouldn't it be simpler to just position itself inside the parent of the bound element (ie. if jQuery('#bla').datepicker() it should position itself in jQuery('#bla').parent(). I realize you're not the person to ask, but I thought you might have some insight on this. ems are stupid btw :)

[plin]

@EduardLuca I can only guess why the jQueryUI team choose to do so, but I think it`s mainly to prevent display issues caused by inherited CSS properties from parent elements.

[Eduard Luca]

Makes sense, but then I'd also drop the em units from the themes (I know you can build your own, I was just lazy and thought there was a quick fix for it). Thanks tho!

[Diego Jancic]

This didn't work for me. I had to add the !important as @SteveWorks suggested on another answer.