Salve a tutti.
E' da ore che sto cercando di risolvere un problema che riguarda le liste puntate... ma non ne sono ancora venuta a capo.
Il problema è questo: ho un menu realizzato con una lista <ul>, dalla quale ho tolto il punto con list-style:none e ho inserito come background un punto grafico. Alcune voci di questo menu sono molto lunghe e devono andare a capo. Avendo impostato anche il padding-left, la parte di testo che va a capo dovrebbe allinearsi al testo e non al punto, ma qui sorge il problema.
Infatti se voglio ottenere un effetto rollover sul punto e scrivo:
ul.lista {
margin:0;
padding:0;
}
ul.lista li a{
list-style:none;
background:url(dot1.png) 0 0 no-repeat;
padding-left:20px;
}
ul.lista li a:hover{
list-style:none;
background:url(dot2.png) 0 -15px no-repeat;
padding-left:20px;
}
... la voce di menu va a capo e si allienea sotto al punto, ignorando il padding-left.
Se invece scrivo semplicemente (rinunciando all'effetto rollover):
ul.lista {
margin:0;
padding:0;
}
ul.lista li {
list-style:none;
background:url(dot1.png) no-repeat;
padding-left:20px;
}
... il testo si allinea perfettamente sotto alla riga precedente, rispettando il padding-left. Sembra che tutto dipenda dal selettore a, ma non capisco perché e quale sia la soluzione.
Qualcuno ha riscontrato lo stesso problema e può aiutarmi? Grazie!
Rispondi quotando
