“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:
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:
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:
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…
I’ve actually have had this problem 4 a while now when developing Arabic websites & the solution you mensuioned is the only thing that I’ve found 2 work. Moreover, IE7 seems 2 suffer from the same issue too.
Mostly, It would b easier 2 apply the rtl on all text containers rather than applying it on the body tag, then reverse it on-floats & re-apply it on its txt! Although, this is not the logical course it save a-hel-lota of time n floats based styles.
After further reading I found out that it is wrong 2 use CSS 2 specify language direction because it’s a structure concern. Hence, it should b declared in the markup it self, interesting. You can read more here. The IE bug is exactly the same with this approach too.
I’m having the same problem in this page that is not being solved by the resetting workaround. Do u have any advise 4 me?
P.S: Can we report this bug 2 microsoft & get help?
Unfortunately, no. I couldn’t find any global solution, apart from fiddling with direction values on various levels of hierarchy, in each separate case.
Setting hasLayout to solve many IE bugs. Including this one.
im doing a site in hebrew, i have the same problem, and i apply direction rtl only to the tags that need the property not to the body, then i float:right the container of the text, in this way i have direction rtl for the text and the position of the element is render the same way in ie6 ie7 and ff.
This was a really great solution and a great relief for me. I have struggled with floating elements, just disapearing to the left when hidden, with display: none; and then shown again. I think i might have spend a week to get around this annoying bug, and i had desided to skip the floating, when i saw this article. And PUFF! all my problems were fixed. SO THANK YOU for this article. It is surely a fix to remember.
I guess the idea of applying RTL to different tags is nonfunctional.
The problem of tabs li can be solved by using display:inline-block instead of display:inline
I know it is too late to reply ‚but… better late than never :)
Thanks Aleksandar for posting this — although years old, it’s great to find all these wonderful resources and solutions on the net .
I finally found relief after having tried all possible hacks i know about… switching direction made IE6 behave again indeed