[CSS] Convertito da span ad ul ...ma perchè funziona male?

Ciao a tutti, ho convertito questo codice:

Codice PHP:

---

<a href="#"><span>Mappa del Sito</span></a>


---

a questo:

Codice PHP:

---

<li><a href="#">Mappa del Sito</a></li>


---

e naturalmente ho dovuto modificare il CSS...solo che nel convertire va tutto ok..tranne che non si vede l'immagine lato sinistro!
Ecco la foto: http://i39.tinypic.com/wi94ld.png
ed ecco come dovrebbe essere: http://www.free-css-templates.com/te...TIAL/unzipped/
Sapete dirmi il perchè non si fa? xD
Ecco il CSS:

Codice PHP:

---

#menulinks {
width: 875px;
height: 55px;
background-image: url(../images/menulinks.png);
clear: both;
padding-left: 25px;
}

#menulinks ul {
list-style-type: none;
padding: 0;
margin: 0;
}

* html #menulinks li { /* Filter for IE6 to prevent li stacking */
float: left;
text-decoration: none;
}

* html #menulinks li { /* Filter for IE6 to prevent li stacking */
float: left;
text-decoration: none;
}

#menulinks li {
padding-left: 14px;
height: 50px;
background-image: none;
display: block;
color: #FFFFFF;
text-decoration: none;
float: left;
font-size: 14px;
font-weight: bold;
}

#menulinks li a {
padding-left: 16px;
padding-right: 30px;
padding-top: 17px;
height: 35px;
display: block;
background-image: none;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-position: left left;
}


#menulinks li a:hover, #menulinks li a.current {
background-image: url(../images/menulinks_left.png);
background-position: top left;
text-decoration: none;
color: #333333;
}

#menulinks li a:hover, #menulinks li a.current {
background: url(../images/menuhover.png) right top no-repeat;
text-decoration: none;
}


---

Grazie 1000...ciao Davide! ^^

Perchè devi dare la parte sinistra a li, poi dare un margin-left a span in base alla larghezza dell'angolo sinistro :wink:

...il problema è 1: sto usando un cms e richiamo il secondo codice (quello senza span) con una funzione di sNews...potrei farlo e solo che non voglio toccare il codice per i prossimi temi! :D xD

al posto di darlo a span lo dai ad a, non cambia niente, devi lavorare solo a livello css :wink:

...ok non ho capito cosa devo fare! é_é ...mi sono perso! p_P

Codice:

---

#menulinks li {
 margin-left: 14px;
 height: 50px;
 background: url(LINK_IMMAGINE_SINISTRA) no-repeat left;
 display: block;
 color: #FFFFFF;
 text-decoration: none;
 float: left;
 font-size: 14px;
 font-weight: bold;
}

#menulinks li a {
margin-left: #px; /* Varia in base alla larfghezza dell'angolo, cambia in modo che si veda */
padding-left: 17px 30 0 16px;
 height: 35px;
 display: block;
 background: url(LINK_IMMAGINE_DESTRA) no-repeat right;
 color: #FFFFFF;
 text-decoration: none;
 cursor: pointer;
 background-position:  left left;
}

---

Prova a smanettare con questo codice, altrimenti leggi qui: Menù a Tab Accessibile :wink:

allora...ho risolto smanettando un pò sui titoli (#menulinks ...) e ci sono riuscito! ;D
Solo che nel .current mi si vede solo la parte sinistra (a) e quando ci passo (a:hover) mi si vede anche la parte destra...come mai? xD
Ho sbagliato il titolo? xD
Ecco il nuovo css:

Codice PHP:

---

#menulinks li {
padding-left:14px;
height:50px;
background-image:none;
display:block;
color:#FFFFFF;
text-decoration:none;
float:left;
font-size:14px;
font-weight:bold;
}

#menulinks li a {
padding-left:16px;
padding-right:30px;
padding-top:17px;
height:35px;
display:block;
background-image:none;
text-decoration:none;
cursor:pointer;
}


#menulinks li:hover, #menulinks li.current {
background: url(../images/menulinks_left.png) top left no-repeat;
color: #333333;
}

#menulinks li a:hover, #menulinks a.current {
background: url(../images/menuhover.png) right top no-repeat;
text-decoration: none;
}


---

Grazie 1000...ciao Davide! ^^

Prova così:

Codice:

---

#menulinks li {
 padding-left:14px;
 height:50px;
 background-image:none;
 display:block;
 color: black;
 text-decoration:none;
 float:left;
 font-size:14px;
 font-weight:bold;
}

#menulinks li a {
 padding-left:16px;
 padding-right:30px;
 padding-top:17px;
 height:35px;
 display:block;
 text-decoration:none;
 cursor:pointer;
}
 
 
#menulinks li:hover, #menulinks li a:hover, #menulinks li.current {
 background: url(../images/menulinks_left.png) top left no-repeat;
 display: block;
 color: #333333;
}

#menulinks li:hover a:hover, #menulinks li:hover a, #menulinks li.current a  {
 background:  url(../images/menuhover.png) right top no-repeat;
 text-decoration: none;
}

---

Questo è il codice html che ho usato:

Codice HTML:

---

<ul id="menulinks">
 <li><a>Mappa del Sito</a></li> 
 <li class="current"><a>Mappa del Sito</a></li> 
</ul>

---

A me va :wink:

Grazie 1000 ;D... ora va!! Ciauuu! ^^

Sono contento che vada :wink: