styling menu tab of JQuery-UI Tabs

Question

i wanna know how to style the tab of the menu (the li) in jquery-ui tabs.

this is my jsfiddle: http://jsfiddle.net/youkai/74BMU/

I wanna create a tab menu with icon, and the tab have equal width (filling up the div width0

currently the div is 600 wide, and i have 6 tab so i set the:

.ui-tabs .ui-tabs-nav li {
border: none;
background: #003300;
width:16%;
}

and it do as i want (set the tab width). however, when the tab is selected, the background of the selected li doesn't fill up the width...

the width i change using the css above also doesn't affect the image icon (which I want to be centered not left-aligned)

Answer 1

If you want to fill up the width. you must use a width:100%; I've updated the fiddle that you created. please check it out.

http://jsfiddle.net/74BMU/11/

here are the changes,

 $('<li><a href="#tab5"><img src=' + petLogo + ' width="100%" height="32px"/></a></li>').appendTo('#tabID');