I’ve been having to flush out a lot of bugs in the project I’ve been working on at work in respect to right-to-left languages. I’m far from finished, actually. But I wanted to note one interesting issue with inline lists. Firefox needs them to be display:inline-block to reverse the elements properly in Hebrew or Arabic. This isn’t supported by Firefox 2, so we have to use display:-moz-inline-box. But, it is supported in Firefox 3, and the display:-moz-inline-box style declaration has undesirable results. So, the fix is to define your styles like this:
Firefox 2 picks up the first style and ignores the second (since it doesn’t recognize it). Firefox 3 picks up the first style but then overrides it with the second style. So all is good.
But what about IE? Well, in the previous post I mentioned a fix for inline lists in IE7 that defines the list items as display:inline-block then immediately redefines them as display:inline. That fix will reverse the lists properly in an RTL language as well. You need to put the fix in an IE-only stylesheet so Firefox retains the inline-block style.
I don’t know why any of this works. I find these things by trial and error. But it seems to work well across browsers, so I’m keeping my fingers crossed.