CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-9
Ariyan
Ariyan

Reputation: 15158

IE loses his lef & right hand on RTL pages

I'm trying to do some round corners work with IE 9 :-(
This is my sample code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style>
            body{
                direction:rtl;
            }
            ul{
                list-style: none outside none;
                padding:0px;
            }
            li{
                display: inline-block;
                padding: 10px;
                border-radius: 20px 20px 20px 0px;
                border: 1px solid #777;
                background-color: #AAA;
            }
        </style>
    </head>
    <body>
        <ul id='some'>
            <li>test1</li>
            <li>test2</li>
        </ul>
    </body>
</html>

Just because of direction:rtl; on body IE loses his left & right hand!
Border is rounded correctly & background is mirrored like image below

IE is an absolute idiot and this picture is one prove on it in millions

it seems it thinks right hand of RTL people is their left hand X-(
Firefox, Chrome, Safari , ... has no problem and render it correctly;
Is there any solution?

Thanks

Upvotes: 1

Views: 735

Answers (1)

OakNinja
OakNinja

Reputation: 2346

EDIT: Updated answer with solution below

http://jsfiddle.net/hxSgH/

        body{
        direction:rtl;
        }

        ul{
            direction:ltr;
            list-style: none outside none;
            padding:0px;
        }

        li{
            direction:rtl;
            display: inline-block;
            padding: 10px;
            border-radius: 20px 20px 20px 0px;
            border: 1px solid #777;
            background-color: #FF0000;
        }

<body>
     <ul id='some'>
        <li>test1 میکنیم @</li>
        <li>test2 میکنیم @</li>
    </ul>
</body>

Upvotes: 1

Related Questions