Bullet Points Positioning with Arabic RTL direction

Question

I am using custom bullet points on a website. Now this site will also be available in Arabic.

.post ul li{
    color: #555555;
    background: url(images/ico-bullet_round.gif) no-repeat !important;
    background-position: 300px 6px !important;
    padding-right: 15px !important;
    padding-left:0 !important;
    direction:rtl;
}

However with direction:rtl; I am unable to have all the bullet points on the right side. Some are more indented than others.

Please see a screenshot showing the problem.

Any suggestions on how to simply align all bullet points on the right?

UPDATE: Please see this screenshot with background-position set to 0 6px. It has something to do with direction:rtl; but I can't figure it out.

Answer 1

Is there any reason why not simply list-style-image, which is designed specifically for custom bullets?

ul { margin: 0 20px; padding: 0; }
ul li {
    margin: 0; padding: 0;
    list-style: disc url(images/ico-bullet_round.gif);
    direction:rtl;
}

works for me, assuming you do mean the right-hand side when you say “right side”. You could have them on the left as well if you wanted by putting the rtl on a child div inside the li, but that'd look a bit strange for Arabic, I think.

Answer 2

I had the same problem and got over it by using:

ul{direction:rtl;}
li{direction:rtl; margin-right:20px;}

The functioning attribute is using: margin-right:20px while using direction :rtl

Thanks

Answer 3

One solution could be to put background-position like this: background-position: 100% 6px !important;

I supppose that the direction: rtl, does not influence in backgrounds.