Salve a tutti, mi chiamo Cristian.

Sto costruendo un menu orizzontale utilizzando il CSS, come file ho un semplicissimo menu in html, il suo relativo css e alcune immagini che lo compongono.

Il risultato è soddisfacente, ma nel primo pulsante a partire da sinistra non c'è quella barra sottile che divide gli altri pulsanti l'uno dall'altro.

Posto qui il codice HTML e CSS:

codice:
<div id="menu"> 
    <ul id="menu-interno"> [*]Benvenuto [*]Testimonianze[*]Iscriviti [*]Chi siamo [/list]
</div>

codice:
#menu {
	position:relative;
	height:45px;
	background-image:url(images/bg_white.png);
	background-position:bottom;
	background-repeat:repeat-x;
	margin:0 0 25px 0;
	clear:both;
	border-bottom:1px solid #ccc;
	top:50px;	
}
	
#menu ul#menu-interno{
	margin:0 auto;
	padding: 3px 0px 0px 0px;
	width:544px;
}

#menu ul#menu-interno li{
	float:left;
	height:45px;
	font-family: Arial, sans-serif;
	font-size:14px;
	margin:0 !important;
	line-height:45px;
	color:black;
	position:relative;
}

#menu ul#menu-interno li a{  
	font-weight: bold; 
	color: black; 
	padding: 12px 25px 12px 24px; 
	background: url(images/bg_white.png) repeat-x 100% 0; 
	background-position: 100% 0px; 
	text-decoration: none;
 }

#menu ul#menu-interno li a:hover{
	background-position: 100% -40px; 
	color: black;	
}
Metto anche le immagini:

- Immagine utilizzata nel CSS:

Questa è quella originale


Questa è quella modificata, tale da avere lo stesso bordo anche sul lato sinistro



- Risultato finale:



Domanda: come faccio a far sì che sia presente quel sottile bordo anche sul lato sinistro del primo pulsante ?

Ho provato anche a creare un pulsante vuoto, e il bordo salta fuori, ma mi occupa spazio inutilmente nella barra, spostandomi tutto più a destra: colpa del padding. Qualcuno riuscirebbe a farmi vedere come forzare il padding a 0 però solo per quel pulsante vuoto ? Caso mai attraverso una class o un'id specifico solo per questo caso.


Grazie mille in anticipo a tutti,
Cristian.