<li> alignées à droite

Hello,

J'essaie d'aligner une liste non ordonnée alignée à droite et d'avoir les puces alignées aussi à droite (puces customs).
Ce que je veux c'est ne pas avoir le texte qui revient à la ligne au niveau de la puce mais du contenu de la ligne.

J'espère être assez clair.

Mon code pour l'instant :

HTML

<ul id="sidebar-menu">
		<li><a class="ajaxified" href="/en/description">Description</a></li>
		<li><a class="ajaxified location" href="/en/location">Location<br>&amp; Map</a></li>

		<li><a href="/en/blog">Blog</a></li>
		<li><a href="/en/special-offers">Special<br>Offers</a></li>
		<li><a class="ajaxified" href="/en/contact">Contact</a></li>
	</ul>

CSS

#sidebar-menu li, #sidebar-submenu li{
	text-align: right;
	margin-bottom: 5px;
	direction: rtl;
}

#sidebar-menu li:before, #sidebar-submenu li:before{
	color:#00adee;
	content: ">\00a0";
}

Ah, et je ne compte pas supporter IE6 donc si vous avez une solution même si ça ne marchera pas sur le vilain petit canard...

Merci !
Modifié par Skoua (08 Feb 2011 - 02:49)

Essaie d'ajouter ça:

a{
            display: block;
            overflow: hidden;
        }

(Je n'ai testé que sur les navigateurs modernes puisque ton code semble déjà poser problème sur IE 8)
Modifié par Vaxilart (08 Feb 2011 - 03:56)

Bonjour,

J'ai pas trop compris ce que tu souhaites mettre en place.

Tu souhaites que la puce soit placée à droite et centrée verticalement ?

J'imagine que la solution de la puce placée en background est impossible ? ou est-ce envisageable ? Sinon tu peux aussi faire ta puce sur le lien.

ul {
    		border : 1px solid #000;
    		width : 250px;
    		margin : 0;
    		padding : 0px;
    		background : #cdc;
    	}
    	
    	li {
    		background : #2B99D4;
    		margin : 5px;
    		padding :15px;
    		list-style-type: none;
    		direction: rtl;
    		border : 1px solid #2B99D4;
    	}   	
    	
    	li a{background:url(puce.gif) center right no-repeat #fff;
    		padding-right : 30px; /* à adapter bien sur */
    		display : block;
    		border:#2B99D4 1px solid;
    	}