Aleksandar • Vacić

iOS bits and pieces

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:

1
2
3
4
5
6
7
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:

1
2
3
4
5
#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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…