reducing the height of jquery ui tabs

I am trying to reduce the height of jque开发者_高级运维ry ui tabs but the formatting is not good. Here is the link to the code. Can anyone let me know how can this be done?

demo: http://jsfiddle.net/v8APf/

.ui-widget-header {
    background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) repeat-x !important;
    color: #222222;
    font-weight: bold;
    height:13px
}

.ui-widget-header ul {
    height:11px;   
}

.ui-tabs .ui-tabs-nav li {
    height:11px;
    font-size:10px;

}

.ui-tabs .ui-tabs-nav li a {
    position:relative;
    top:-6px  
}

You can add a javascript code

$("#tabs").css("height",$("body").height());

Not sure what it is you want to accomplish, because when you reduce the height, the tabs looks even more off.

However, if I add to the height of the .ui-widget-header and the .ui-tabs .ui-tabs-nav li it all fits.

http://jsfiddle.net/jasongennaro/rRpNz/5/

Your question is very vague, but I managed to play around to get a better visual effect here. You need to play around with .ui-tabs .ui-tabs-nav li a and .ui-tabs-nav

As of jquery-ui-1.11.4, the size of the tabs themselves is determined predominately by the font size and padding attribute.

The following shows the relevant selector and its default values in jquery-ui.structure.css which you get in the downloaded distribution from jQuery theme roller site.

Original relevant CSS selector:

/* jquery-ui.structure.css */

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

The following supplemental definition, which I added to my HTML file in <style></style> tags, overrides defaults, reduces the tab size (perhaps too much) by taking the padding to 0 and reducing the font size from the default. While legible, it makes the tabs too small for my personal tastes. I prefer something in between the default above and this:

Add/override relevant attributes:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0 0;
    font-size: smaller;
}

Note: I personally like to keep the CSS stylesheets provided with a utility or widget in tact and merely extend/override the CSS by adding the changes to my HTML file or one of its associated stylesheets.