• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed RTL Layout Issue In Old IE

ibnesayeed

Well-known member
#1
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.

 

ibnesayeed

Well-known member
#4
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. :)
 

ibnesayeed

Well-known member
#7
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.
 

Mike

XenForo developer
Staff member
#8
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>
 

Mike

XenForo developer
Staff member
#9
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.
 

ibnesayeed

Well-known member
#10
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.
And just to make sure, I did not miss 1.1.2 release yet, right? :)