UL - LI Bullets as Image an right side next to the text

Question

i have some problems with styling an UL as navigation bar (sorry for this question, but iam a developer, not designer..)

The Problem occours in Safari on Mac (FF is working fine) See first picture (FF)

Css:

.multiPoint {
    list-style-image:url(../images/punkte.jpg); }

.directionRight{
    direction:rtl;
    padding-right:3em;
    margin-right:0.5em;
}

#navigation {
    text-align: left;
}

HTML:

<div id="navigation" class="span-6 directionRight">
    <ul>
    <li class="multiPoint">Sie</li>
    </ul>
</div>

Answer 1

If the bullet image is directional (like in the example above), the rtl approach may have the unintended side-effect that the image is mirrored in some browsers, resulting in an arrow pointing from right to left instead of left to right.

A background image does not show this behavior in IE9 and it maintains the correct orientation.

list-style: none;
background: url(images/bullet.gif) no-repeat center right;  
padding-right: 10px;

Answer 2

Try updating your multiPoint class style as follows:

.multiPoint {
   list-style-image:url(../images/punkte.jpg);
   list-style-position: inside;
}

That will tell the browser to position your bullet images inside the list instead of outside.