1 Topic by zaher

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Topic: Problem CSS RTL in Opera

RTL css work find in FF and IE but in Opera nop sad
See this posts in Opera in Arabic Right to left layouts

http://www.parmaja.com/forums/viewtopic … age=Arabic

Div.postmsg is over postleft
i play a while to resolve this proplem with no luck, may be it is bug in Opera i done know.

I maked one change to resolve it temporary, in file base.css

before

DIV.postmsg {   
   WIDTH: 100%;
  }

after

DIV.postmsg {   
   float: right;
   WIDTH: 100%;
  }

it is worked but the right border of postright div "18em" disappeared.

is any other way to make it work good.

Thanks in advance

If your people come crazy, you will not need to your mind any more.

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Problem CSS RTL in Opera

I will install the Arabic language pack and your RTL stylesheets so I can play with it. I will get back to you.

3 Reply by zaher (edited by zaher 2006-09-05 22:30)

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Re: Problem CSS RTL in Opera

Hi again, i tried this day to play with css, so extract a style to put simple html code

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Test div alignment</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<link rel="stylesheet" type="text/css" href="layout_ltr.css" />
</head>
<body>
</body>


        <div class="postleft">
                <dl>
                    <dt><strong>postleft</strong></dt>
                    <dd><strong>list</dd>
                </dl>
            </div>

            <div class="postright">
                <h3>postheader</h3>
                <div class="postmsg">
                  <p>
            postmsg<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
            This is a body message<br />
          </p>
                </div>
            </div>
            <div class="clearer"></div>
            <div class="postfootleft"><p>postfootleft</p></div>
            <div class="postfootright"><div>postfootright</div></div>
      </div>

</html>

test.css

.clearer {
    HEIGHT: 0;
    WIDTH: 0;
    LINE-HEIGHT: 0;
    FONT-SIZE: 0;
    OVERFLOW: hidden;
   CLEAR: both;
}

DIV.postright H3 {
    POSITION: absolute;
    DISPLAY: block;
    OVERFLOW: hidden;
    WIDTH: 1em;
    LEFT: -999em
}

DIV.postmsg {
   OVERFLOW: hidden;
   background-color: #FFF5E3;
}

DIV.postleft {
 background-color: #F2F5FF;
}

DIV.postright {
   background-color: #FFFFD4;
}

DIV.postfootright{
   background-color: #FFD7D7;
}

DIV.postfootleft {
   background-color: #ECECEC;    
}

DIV.postmsg {
   WIDTH:100%
}

DIV.postmsg P {PADDING: 0}

DIV.postleft DL, DIV.postright {PADDING: 6px}

layout_ltr.css

BODY {
  direction: ltr;
}

DIV.postfootright {
   TEXT-ALIGN: right;
}

DIV.postleft, DIV.postfootleft {
    FLOAT:left;
    WIDTH: 18em;
    OVERFLOW: hidden;
}
DIV.postright, DIV.postfootright {
   BORDER-LEFT-color: #A2FFBA;    
   BORDER-LEFT-WIDTH: 18em;    
   BORDER-LEFT-STYLE: solid;
}

layout_rtl.css

BODY {
  direction: rtl;
}

DIV.postfootright {
   TEXT-ALIGN: left;
}

DIV.postleft, DIV.postfootleft {
    FLOAT:right;
    WIDTH: 18em;
    OVERFLOW: hidden;
}

DIV.postright, DIV.postfootright {
   BORDER-right-color: #A2FFBA;    
   BORDER-right-WIDTH: 18em;    
   BORDER-right-STYLE: solid;
}

Test it in IE, FF, Opera look good

now change this line in test.html

<link rel="stylesheet" type="text/css" href="layout_ltr.css" />

to make layout_ltr replaced with layout_rtl

and test in the three browser.
Ok i caused to you a headache smile forgive me Paul

If your people come crazy, you will not need to your mind any more.

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Problem CSS RTL in Opera

I hadn't forgotten about this I just wasn't getting very far. I got things to work in Opera but break in IE. Is that solved now or is there still a problem?

What I found is that if you specify rtl then Opera automatically reverses some elements e.g. if you say margin-right Opera treats it as margin-left. In other words, it ignores what you say in the stylesheet and just assumes you want to reverse things.

5 Reply by zaher

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Re: Problem CSS RTL in Opera

Nop it is still a problem, but make it this layouts above to understand the probelm easy (i hope) , there is also another problem but not now.

CSS it is like a smoke you can catch it without disperse.

If your people come crazy, you will not need to your mind any more.

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Problem CSS RTL in Opera

I think the problem is that Opera designers have tried to be too clever. Their idea is that people can take a ltr stylesheet and quickly make it look the opposite. Thats a problem because nobody else does it that way.

7 Reply by zaher

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Re: Problem CSS RTL in Opera

If you make direction = rtl for ltr css file, Opera not take the correct way, maybe somthing wrong there.
This way to flip the css i found it in DokuWiki also.
My ask is that bug in opera? or that mean CSS still need a time to be standard.

If your people come crazy, you will not need to your mind any more.
  • From: Israel
  • Registered: 2006-12-24
  • Posts: 43

Re: Problem CSS RTL in Opera

So what is it? A bug in Opera, or a bug in CSS? Does anybody have a good solution to this problem (fixing the css errors in Opera)?

Thanks!

Regards,
Dan,
PunBB Hebrew translator.

Dan_y2k's Website

9 Reply by zaher

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Re: Problem CSS RTL in Opera

I have test RTL in the three browser but every one take a defirent way to process rtl, the bug not in opera, problem
is: there is no any standard of correct processing RTL in browsers.

But in Punbb use BORDER-WIDTH of Div taked inside the Div in opera, i hope Paul not play with BORDER-WIDTH to make the left panel color (right panel in RTL), i forget the names but the problem about (BORDER-WIDTH).

In PunBB 1.3 i will try make css for every browser detected by the request browser.

If your people come crazy, you will not need to your mind any more.
  • From: Israel
  • Registered: 2006-12-24
  • Posts: 43

Re: Problem CSS RTL in Opera

Well, I'm glad you'll fix it on 1.3, but is there any temporary solution to the Opera problem?

Regards,
Dan,
PunBB Hebrew translator.

Dan_y2k's Website

11 Reply by zaher

  • zaher
  • Senior Member
  • Offline
  • From: Syria, Damascus
  • Registered: 2004-02-16
  • Posts: 773

Re: Problem CSS RTL in Opera

We have a week of holiday (next Saturday), maybe i will try to do something, because i like Opera, so wish to me a good luck smile

If your people come crazy, you will not need to your mind any more.
  • From: Israel
  • Registered: 2006-12-24
  • Posts: 43

Re: Problem CSS RTL in Opera

Good luck dude, I hope you'll figure it out...
Thanks for your hard work.

Regards,
Dan,
PunBB Hebrew translator.

Dan_y2k's Website