Css li navigation spacing...

[powpow]

hey everyone... trying to work out this script to have a left side navigation.  The issue I am having is there is unnecessary white space in between the links. 

 

 

I used the tutorial here :

http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/

 

here is my html code  for the links

 

                        <div id="left-sidebar">
                                <ul>
                                <li id = 'Home'><a href='index.html' id = 'Home1'>Home</a></li>
                                <li id = 'Apps'><a href='Apps.php' id = 'Apps1'>Appetizers</a></li>
                                <li id = 'SS'><a href='SS.php' id = 'SS1'>Soups & Salads</a></li>
                                <li id = 'Ent'><a href='Ent.php' id = 'Ent1'>Entr&#233;es</a></li>
                                <li id = 'Vent'><a href='VEnt.php' id = 'Vent1'>Vegeterian Entr&#233;es</a></li>
                                <li id = 'Des'><a href='Des.php' id = 'Des1' >Desserts</a></li>
                                <li id = 'Wine'><a href='Wine.php' id = 'Wine1'>Wine</a></li>
                                <li id = 'CU'><a href='CU.php' id = 'CU1'>Contact Us</a></li>

                                </ul>

 

 

css ...

#left-sidebar {
        background: white;
        width: 150px;
        float: left;
        padding-left: 15px;
        padding-top: 20px;
        padding:0;
        margin:0;
}

#left-sidebar li {

        list-style-type:none;
}

#left-sidebar a, #left-sidebar a:visited {
  padding-top:0px;
  display:block;
  width:9em;
  border:1px solid #808;
  }

#footer {
        background-color: rgba(128,128,0,.6);
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        color: white;
}
#Home{
background-image:url(images/ARhome.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#Apps{
    padding-top:0px;
    background-image:url(images/ARapp.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#SS{
background-image:url(images/ARss.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#Ent{
background-image:url(images/ARent.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#Vent{
background-image:url(images/ARvent.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#Des{
background-image:url(images/ARdess.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#Wine{
background-image:url(images/ARWine.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}
#CU{
background-image:url(images/ARcon.jpg);
    background-repeat:no-repeat;
    display:block;
    height:58px;
    text-indent:-9999px;
    width:250px;
}

 

attached is a photo of the spacing between the links.

 

 

Thanks for your help!

 

[attachment deleted by admin]

[Frank P]

Obviously, your images don't show up when we copy, paste & render your code. And your images seem to play a vital role. Can you put it online?