Fixed RTL Layout Issue In Old IE

ibnesayeed

ibnesayeed

Well-known member
Some of our forum members are forced to use old IE browser in their office. They complain about the serious layout float issues on our RTL forum. A screen shot is attached below.

One can easily observe long horizontal scroll bar. Navigation tabs, Inbox, Alert and other stuff on that bar is floated somewhere far away from the stage. Similarly, post author icon and other user info is floated to left. This problem was reported to us long back but we don't get a solution ourselves yet. Hence reporting here.

vpcgg2.jpg
 
I have experimented it myself in IE9. Everything looks good in normal mode but if I click on "compatibility mode" icon, result is almost the same as screenshot above. :-)
 
How to replicate:

Go to XenForo Demo site and create a demo.
Login to Admin Control Panel and create a new language in Right-to-Left direction. (Or change the default language settings to make it RTL)
Open public demo site in any version of IE and select the RTL language. If browser is old then you should not see rounded corners and you may see missing navigation tabs. You may also see a horizontal scroll bar at the bottom.
If you have newer version of IE, things should appear OK but the moment you click on compatibility mode icon, rounded corners and navigation tabs will be gone and horizontal scroll bar will appear.

I have created such a demo already. You may experience before it expires. To experience the issue, open it in IE and select the "Arabic RTL" language from footer if not selected already.
 
I haven't seen the avatar thing, but I've been focused on the navigation issue. I can confirm it happens, and thus far I've been totally unable to workaround it. It's triggered if you have a float: right element inside a float: right element:
HTML: 
<!DOCTYPE html>
<html dir="rtl">
<head>
 
    <meta charset="utf-8" />
    <style type="text/css">
        div { background: lightgrey; border: 1px solid red; overflow: hidden; zoom: 1; margin-bottom: 10px; }
        ul { background: grey; border: 1px solid yellow; list-style-type: none; margin: 5px; padding: 0; overflow: hidden; float: right; }
        ul.left { float: left; }
        li { background: black; color: white; border: 1px solid orange; padding: 5px; margin: 5px; float: right;}
    </style>
</head>
<body>
 
<div>
<ul>
    <li><a>test 2</a></li>
    <li><a>test test test 3</a></li>
    <li><a>test 4</a></li>
</ul>
<ul class="left">
    <li><a>test 2</a></li>
    <li><a>test test test 3</a></li>
    <li><a>test 4</a></li>
</ul>
</div>
 
</body>
 
And I've finally found a workaround - there were a few other places that had issues with it too.

I can't reproduce the avatar thing, and it's possible that some of the other changes have fixed it. Please let me know if you still have an issue in 1.1.2.
 
Mike said:
And I've finally found a workaround - there were a few other places that had issues with it too.

I can't reproduce the avatar thing, and it's possible that some of the other changes have fixed it. Please let me know if you still have an issue in 1.1.2.
Click to expand...

And just to make sure, I did not miss 1.1.2 release yet, right? :-)
 

Similar threads

Russ
Style XenBase Framework - pixelExit.com
3 4 5
Replies
97
Views
38K
AlexBrown84
A
Top Bottom