Question

I have implemented this Feature Content Slider:
http://demo.webdeveloperplus.com/featured-content-slider/

There seems to be space between the Navigaion LIs and I cannot determine how to eliminate that space: The issue is on my development site: http://www.virtualpetstore.com/green.aspx

However in my JSFiddle workup, this appears fine- without any space:
http://jsfiddle.net/NinjaSk8ter/6WXkM/

Here is an illustration of the Issue:

The Yellow and Blue Divs are not causing this space.
Also, This 1px of bottom padding in featured ul.ui-tabs-nav li has nothing to do with that space:

 #featured ul.ui-tabs-nav li{ 
    padding:0 0 1px 15px;        
    color:#666;
    /*background-color:red;*/
 }



#featured{ 
    width:546px; 
    position:relative; 
    border:2px solid #ccc; 
    height:260px;
    /*height:255px;*/
    background:#ffffff;
    background:yellow;
}
    #featured ul.ui-tabs-nav{ 
    position:absolute; 
    list-style:none; 
    padding:0 0 0 0; 
    margin:0 0 0 368px; 
    width:178px;
    /*height:255px;*/
    height:245px;
    background-color:blue;
}
#featured ul.ui-tabs-nav li{ 
    padding:0 0 1px 15px;        /*left is distance between pointer and lis*/ 
    color:#666;
    /*background-color:red;*/
}
#featured ul.ui-tabs-nav li img{ 
    float:left; 
    margin:3px 2px 0 3px; 
    padding:1px; 
    border:1px solid #080808;
    /*background:olive;*/
}
#featured ul.ui-tabs-nav li span{ 
    font-size:8px;              /*font size of text nav li boxes*/
    padding:0;
}
#featured li.ui-tabs-nav-item a { 
    display: block;
    /*height: 59px;*/
    height:60px;               /*height of nav li boxes*/
    font-family:Verdana;
    color:#333;  
    background:#fff; 
    line-height:9px;            /*distance between anchor tag text*/
    /*text-decoration:none;*/
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}

#featured li.ui-tabs-selected{ 
    background:url("/images/Green/GreenSlider/selected-item.gif") top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background-color:#CCCCCC; 
}
#featured .ui-tabs-panel{ 
    width:368px; 
    height:255px;
    position:relative;
    /*background-color:orange;*/
}
#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:209px; 
    height:46px; 
    background: url("/images/Green/GreenSlider/transparent-bg.png"); 
}
#featured .info h2{ 
    font-size:13px; 
    font-family:verdana; 
    color:#FFFFFF; 
    padding:3px 0 0 4px; 
    overflow:hidden; 
}
#featured .info p{ 
    margin:0 0 0 5px;
    font-family:Arial; 
    font-size:12px; 
    line-height:13px; 
    color:#f0f0f0;
}
#featured .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#featured .info a:hover{ 
    text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
    display:none; 
}

Answer 1

Looking in Firebug, you need to remove this CSS (on line 484):

#mid-feature-client li {
    margin-bottom: 4px;
}

Or, if you need that for something else (which seems likely), you can alternatively solve this by adding:

#featured li {
    margin: 0;
}