Espaces indésirables entre composants (img) d'une liste horizontale

Je me met au CSS : je débute donc je bute... sur certain détail de mise en page dont celui-ci pour lequel j'aimerai bien un point de vue expérimenté :

Pour accéder au versions étrangères de mon site, je veux mettre des petits drapeaux cliquable en haut à gauche. j'ai donc fait une liste horizontal (merci les tutos d'Alsacrea ! ) avec comme composant <li> une image de chaque drapeau.

Le pb est qu'un espace apparait entre chaque image et je suis décalé avec l'image de fond. Je n'arrive pas à les supprimer.

1 -d'où vient-il ?
2 -comment la supprimer ?
3 -et vous, vous feriez comment ?

HTML:

<div id= "versions">
	<ul>
	<li><a href="#"><img src="images/serigraphie_fr.jpg"></a></li>
	<li><a href="#"><img src="images/silkscreen-printing_gb.jpg"></a></li>
	<li><a href="#"><img src="images/siebdruck_de.jpg"></a></li>
	</ul>
</div>

CSS:

#versions {
	background-repeat: no-repeat;
	height: 76px;
	position: relative;
	text-align: right;
	}
	
#versions ul li {
	display: inline ;
	list-style: none;
	}

#versions ul li img {
	margin: 0;
	padding:0;
	}

http://www.graphy-oceane.com/version09/test.htm

Merci de votre aide.

Bonjour et bienvenue stfgo,

stfgo a écrit :
1 -d'où vient-il ?

chaque item de liste est séparé par un(e) espace (whitespace en anglais) dans ton code, résultant des espaces, tabulations et retours chariot entre un </li> et le <li> suivant.
Tu peux avoir 3 espaces, 5 tabulations et 15 retours à la ligne, c'est "réduit" à un seul en HTML mais pas 0 (sauf dans un élément <pre>).

stfgo a écrit :
2 -comment la supprimer ?

Le mieux est de coller les items de liste en ne laissant *rien*

</li><li>

mais tu peux aussi rajouter un float: left; (s'en passer c'est mieux, je déconseille)

stfgo a écrit :
3 -et vous, vous feriez comment ?

je n'utiliserais pas des drapeaux nationaux mais le nom des langues dans la langue du locuteur, ex:

english - français - deutsch - español

parce qu'un belge francophone n'est pas (<vendredÿ>encore</vendredÿ>) français et un irlandais certainement pas anglais ... autrichien, australien, argentin, taïwanais, etc
Et qu'un chinois ne sait pas forcément que le nom de sa langue est 'mandarin/chinois' en français; par contre ça lui parle
Souci: c'est moins visuel et accrocheur qu'un drapeau m'enfin si c'est placé en haut à droite de ton site, c'est là qu'on s'attend à les trouver
Modifié par Felipe (27 Feb 2009 - 16:29)

Merci de ton accueil et de ta réponse.

J'ai bien compris d'où venait mon pb (et surtout qu'il ne venait pas d'une erreur CSS, ouf ! ). Ta solution marche très bien !
J'ai mis des images pour pouvoir y rajouter de "alt" pour le référencement, donc je vais surement rester sur cette soluce mais la tienne est très logique du point de vue du visiteur.

Dernière chose, venant de la mise en page "tableau", ça me fait bizarre de superposer mes images (ici les drapeaux sur mon fond de cellules) : j'ai peur au décalage. C'est une pratique courante ?