Again with the inline lists (this time a bidi issue)

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:
.myList li{display:-moz-inline-box;display:inline-block}
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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s