direction:rtl breaks CSS layouts in IE
“Fun” with Internet Explorer 6 seems never ending, as the case with recent internationalization efforts I did in the office shows. We needed to create a Hebrew version of our flagship web site product - a language where writings goes right to left.
Hence, our three-column layout, done with floats, was supposed to be inverted. Along with that, a number of other parts was to be horizontally flipped - one of them being variable tabs I created way back. CSS2.1 spec defines few rules responsible for right to left display. So, what we did was:
body {
unicode-bidi: embed;
direction: rtl;
}
With these rules, Firefox worked ok, but IE6 almost totally collapsed. It’s not only messed when displayed - when you move your mouse over elements they disappear, move to different places… Only direction rule is enough to mangle it - I added just this one line to previously mentioned tabs example:
#tabs {
direction: rtl;
}
Here is the screenshot, if you can’t check it in IE:
Holly-hack does not help here, setting width/height or position neither. Nothing helps here, I tried them all. It is somehow connected with float, but removing that rule does not really helps.
Workaround is to override direction for floats and re-apply it to elements that contain actual text:
body {
direction: rtl;
}
#tabs li {
direction: ltr;
}
#tabs a {
direction: rtl;
}
Of course, last two lines would go under cond. comments, so that only IE is targeted. I’ll see if something else comes up during ongoing work…