Styling Jquery-ui tabs

Question

I am playing with the jquery tabs attempting to style them the way I see fit. I attempted to shrink the tabs and added a height:45px; to the UI stylesheet as seen below.

.ui-tabs-vertical .ui-tabs-nav li { 
  clear: left; 
  height:45px; 
  width: 100%; 
  border-bottom-width: 1px !important; 
  border-right-width: 0 !important;
  margin: 0 -1px .2em 0;
}

Yet, instead of shrinking all the tabs it kept one (the last one) unchanged. It can be seen here, the tab labeled Trash JS-FIDDLE demo. I would like to understand what is going on and how I can fix it. Also, any other coding tips would be greatly appreciated.

Answer 1

The anchor tag inside the li is higher than the li. If you restrict that height it can work.

    .ui-tabs-vertical .ui-tabs-nav li a { height: 30px; }

See updated fiddle

I just noticed with chrome developer tools that your tabs are overlapping. Only the last one is not overlapped and therefore looks taller than the others.

Answer 2

First shirink the font size in widget

.ui-widget{font-family:Arial,sans-serif;font-size:medium}