lista e img

[michelepi]

Salve ho questo, una lista con immagini

<ul>[*][url="#"][img]../ico/documenti_penna.gif[/img][/url][*][url="#"][img]../ico/documenti_penna.gif[/img][/url][*][url="#"][img]../ico/documenti_penna.gif[/img][/url][/list] 

Con questo css non riesco ad allineare l'immagine alla scritta del link

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
list-style-image: url(../ico/cartellina_gialla.gif);
border: 1px red ;
padding-bottom: 10px ;
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Invece se inserisco l'immagine nel documento html così:

<h1>Titolo Menu1</h1>
 <ul>
     [*][url="#"][img]../ico/cartellina_gialla.gif[/img] Menu1[/url]
     [*][url="#"]Menu2[/url][/list] 

Con questo css funziona l'allineamento dell'immagine

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Vorrei anche capire quale è la strada da percorrere se introdurre immagine nel css oppure nel documento

grazie