IE9 RTL Positioning

Question

Fiddle: http://jsfiddle.net/bHRVe/

A sprite is used for the arrow. The background position in Firefox and IE8 is great:

However, the RTL direction seems to drop IE9, the arrows are gone:

If I changed the positioning from left -52px to right -52px , then it will display correctly in IE9, but breaks in other browsers.

Is there a way to fix this using the same CSS? (no conventions or hacks)

Answer 1

Just change your CSS a bit:

 .button span { background: url("http://i48.tinypic.com/16716yb.png") no-repeat scroll left -52px transparent; margin-right: 0.5em; direction: rtl; display: inline-block; width: 10px; height: 16px; } 

Living example . Tested and works in IE9, Chrome, Firefox, Safari and Opera :)

Answer 2

Here is a clean CSS based solution:

CSS

 .button span { background: url("http://i48.tinypic.com/16716yb.png") no-repeat 0 -52px; margin-right: 0.5em; padding: 0 5px; direction: rtl; width:4px; height:15px; display:inline-block; } 

HTML:

Note. It’s good practice if you put a space (   ) in an empty element, because for a while it helps in browser compatibility.

 <a class="button" href="#"> <b>تم, غزو عل جنوب</b> <br/> <u>ب ان. Testما وص</u> <span>&nbsp;</span> </a> 

Additional notes: By default, <span> and <a> elements are inline elements. we need to make them display:block; or display:inline-block; using css according to our need.

In your case, you can also use display:block; but then you need to add float:left to make the span in the right place.

Screen shot: IE9