Question

I am using jQuery Tabs to display images.

The HTML, also viewable on jfiddle follows:

<div id="dgTabs" style="width: 500px;">
    <ul>
        <li><a id="a1" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a2" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
              <li><a id="a3" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a4" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
            <li><a id="a5" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a6" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
              <li><a id="a7" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a8" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
    </ul>
</div>

​

How can I change the CSS so the image fills the whole tab? Which element in which CSS file do I need to update? Basically, I want no padding.

Answer 1

this padding is present in jquery-ui.css file, you need to override below padding

#tabs .ui-tabs .ui-tabs-nav li a {
  float: left;
  padding: .5em 1em;
  text-decoration: none;

 }

Updated

To set width you have to do like following

#tabs ul li, #tabs ul li a {
  width: 15px;
 }