“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:
1 2 3 4 5 6 7
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:
1 2 3 4 5
Here is the screenshot, if you can’t check it in IE:
Holly-hack does not help here, setting
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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…