css image d'arrière-plan est coupé

J'ai une liste non ordonnée et l'image de fond est coupé lorsque vous essayez de les placer à côté du texte.

J'utilise jquery pour ajouter la classe à la balise d'ancrage pour afficher l'image, et sa fonctionne très bien, le seul problème est que l'image est coupée. J'ai été jouer avec le css, mais n'arrive pas à comprendre comment faire de l'affichage de l'image correctement...il me semble que le < li > est de cacher l'image derrière lui en quelque sorte...puis-je placer l'image en face de la < li > pour qu'il affiche...ou alors j'ai loupé quelque chose d'autre?

Quelqu'un peut m'aider? Merci.

Voici le code HTML:

<ul id="nav>
    <li>
       <a class="folder_closed">Item 1</a>
       <div style="display:none">Content for item 1</div>
    </li>
</ul>

Voici le CSS:

ul#nav{
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;
}

#nav > li{
    vertical-align: top;
    text-align:left;
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
}

.folder_open{
    position:relative;
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
}
.folder_closed{
    position:relative;
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px; 
}
Pouvez-vous fournir un lien vers un site en ligne afin que nous puissions voir ce qui se passe?
je souhaite...c'est sur localhost et je n'ai pas de développement de la zone qui est en direct.
Essayez de jsbin.com pour des démonstrations en direct.

OriginalL'auteur Ronedog | 2010-04-16