Comportement bizare d'un menu

Bonjour,
j'ai un code gerant un menu CSS horizontal.
sous dreamweaver quand le texte des boutons est un mot en caractère romain pas de problème mais si je met un tiret ou si c est en japonais cela se met en vertical.
par contre si j'insère un point pas de problème.

je ne comprends pas pourquoi

voici les codes

le code CSS:

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0; }
 
.cssmenu{
margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('img/topMenuImages.png') repeat-x;}
.cssmenu li{
padding:0; margin:0; list-style:none; display:inline;}
.cssmenu li a{
float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('img/topMenuImages.png') 0px -30px no-repeat;}
.cssmenu li a span{
line-height:30px; float:left; display:block; padding-right:15px; background:url('img/topMenuImages.png') 100% -30px no-repeat;}
.cssmenu li a:hover{
background-position:0px -60px; color:rgb(255,255,255);}
.cssmenu li a:hover span{
background-position:100% -60px;}
.cssmenu li a.active, .cssmenu li a.active:hover{
	line-height:30px;
	font:12px Verdana, Arial, Helvetica, sans-serif;
	color:rgb(255,255,255);
	background-image: url(img/topMenuImages.png);
	background-repeat: no-repeat;
	background-position: 0px -90px;
}
.cssmenu li a.active span, .cssmenu li a.active:hover span{
background:url('img/topMenuImages.png') 100% -90px no-repeat;}

dans la page:

<div id='cssmenu'>
<ul class="cssmenu">
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href="profil.html"><span>About</span></a></li>
<li><a href="lecon.html"><span>&#12524;&#12483;&#12473;&#12531;</span></a></li>
<li><a href="atelier-france.html"><span>&#12450;&#12488;&#12522;&#12456;</span></a></li>
<li><a href="formulaire.html"><span>&#12524;&#12483;&#12473;&#12531;&#30003;&#36796;</span></a></li>
<li><a href="http://aj-france.com/blog/" target="_blank"><span>&#12502;&#12525;&#12464;</span></a></li>
<li><a href="acces.html"><span>&#12450;&#12463;&#12475;&#12473;</span></a></li>
<li><a href="equipe.html"><span>&#35611;&#24107;&#32057;&#20171;</span></a></li>
<li><a href="ajj-promo.html"><span>AJ-Journal</span></a></li></ul>
</ul>
</div>

Je dois pas comprendre le problème parce que tout est niquel de mon côté ?!

http://jsfiddle.net/VmAb7/

Salut,

Si je peux me permettre, ne te base pas que sur DreamWeaver concernant l'aspect de ton site... Je sais pas si c'est pareil pour tout le monde, mais je trouve que qu'il y a beaucoup d'incohérence avec le rendu sour DW et sous une plateforme IE ou Firefox ou autres.