CODEWITHSUNDEEP
cssinternet-explorer-9right-to-left
Jen
Jen

Reputation: 584

IE9 RTL background positioning

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

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

FF Screenshot

However, the RTL direction seems to be throwing off IE9, the arrow is no longer there:

IE9 Screenshot

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

Is there any way to fix this using the same CSS? (without conditionals or hacks)

Upvotes: 4

Views: 971

Answers (2)

w3uiguru
w3uiguru

Reputation: 5895

Here is pure css based solution of your problem:

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 is good practice if you put space ( ) in empty element because some time it helps in browser compatibility.

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

Additional Note: By Default <span> and <a> elements are inline elements. we need to make them display:block; or display:inline-block; using css as per our need.

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

Screen Shot: IE9

enter image description here

Upvotes: 2

Morpheus
Morpheus

Reputation: 9075

Just change your css a little 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;
}

Live example. Tested and working in IE9, Chrome, Firefox, Safari and Opera :)

Upvotes: 1

Related Questions