[Problema] Botonera css

[amirx]

Buenos dias, tengo un problema con mi botonera que es la siguiente.

Yo tengo que hacer la botonera que sea

"English | Frances | Español"

El primer problema empieza que en la pagina se me ve asi:

" | | Español Frances English"

El codigo del HTML es:

Código:

<div id="idioma">
            	<ul>
                    <li>English </li> |
                    <li>Francais </li> |
                    <li>Español</li>
                </ul>   
            </div>

Y lo que hice con el css es:

Código:

#idioma ul {
	font-size: 10px;
}

#idioma li { 
	list-style-type: none;
}

#idioma ul li {
	float: right;
	padding-right: 10px;
	color: #745744;
	padding: 6px 1px;
}

Osea, en si el problema es que primero se me ve la lista al reves de como tiene que ir. Y segundo y los "|" no entran entre medio de las palabras.

Que puede ser?

[alexk]

es incorrecto que este fuera del <li> tu separador "|" no es valido

Código:

 <li>English </li> | 

prueba con

Código:

<li>English <span>|</span></li>

y con css lo alineas con "margin/padding" para dar el mismo resultado...
yo suelo usar "border-right" a los li para este caso + "display:inline" a los "li" y con la pseudo clase ":last-child" quitar al ultimo li el border

[jluisfg]

Al darle align right los elementos se invierten, es chistoso pero así pasa.

Trata invirtiendo el orden en la lista o como dice el amigo alexk.

Saludos!

[sarjentocuch]

Mira a quien me encuentro por aqui jeje eseeeee alex :) :)
perdon que hagaun poco de intruso en este post, solo queria saludar jeje

PD: ando buscando algo especifico en CSS :)