The problem with the arrow is mainly because your template is forcing the browser into quirks mode. Quirks mode is implemented in browsers for historical reasons and should be avoided unless there is a real compelling reason to use it.
In your case, quirks mode in IE, basically ignores the .rtl class in the stylesheet rules. That is why you are getting the 'right to left' version of the arrow displayed instead of the 'left to right' version.
I don't know why the designer of your template used quirks mode or if it was even intentional.
You can change your template to not invoke quirks mode by removing the first line that is being output on the page. This is the one before the DOCTYPE:
<!--< ?xml version="1.0" encoding="utf-8"? >-->
That should make the arrows display correctly, however, if you do that you will want to check the other pages on your site to make sure that there are no adverse affects of this change.
Or you could change the stylesheet so that the rtl rule uses the same arrow graphic as the ltr rule.
Hope that helps.