(sorry for the esoteric geek-out here, but I just had to share the kind of crazy stuff we're running into on a Drupal site [Amnesty International's] that has to work part-fluidly in 800x600, IE6, 150% font size, right-to-left switching...)
09/27/07 14:15:04 changed by chris ¶
Comment: Okay, the problem is that in FF you lose the ability to add padding or margins to inline elements in rtl. The one documented hack is to add "display: -moz-inline-box" to the element for which you want to add padding or margins. This works, but it undoes the rtl display, which in our case meant backward chevrons and backward (to an arabic reader) arabic text. After a lot experimenting (no documentation in English on this one out there, though I have to imagine that Middle Eastern web designers have this documented in Arabic) I found a workaround that looks decent in FF and IE6, and is maintainable. It turns out that you can avoid the padding problem (for the most part) without the -moz-inline-box hack by marking up the menu as an unordered list, applying the display: inline to the list item, marking up the text inside the list item with a span tag and then applying display: block to that. I still ended up not being able to add padding to the chevrons within the tag, but in the interests of time, I fixed that by adding an non-breaking space after the chevron and adjusting the rest of the spacing to match.