Auto Margin on RTL Pages

Forum Moderators: not2easy

Message Too Old, No Replies

Auto Margin on RTL Pages

aeae

2:45 pm on Oct 20, 2007 (gmt 0)

I'm trying to develop a template of my website for languages that read right-to-left.

Right now I'm having a problem creating a RTL page with an auto margin.

Internet explorer has the content off way to the right of the page, where half of its cut off, whereas FF shows it properly.

Any ideas how I can resolve this issue?

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body{width:748px;margin:10px auto;direction:rtl}
#c{width:728px;border:1px solid #000;padding:9px}
</style>
</head>

encyclo

3:49 pm on Oct 22, 2007 (gmt 0)

I have an answer, but not an explanation. IE6 is flaky with RTL, but I can't find any reference to it mesing up auto margins, especially in a test-case as simple as this.

My unexplained solution: set the text-direction as LTR on the

html

element via CSS, then override it (again via CSS) on the

body

element. So:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" [b]dir="rtl"[/b]>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
[b]html {direction:ltr;}[/b]
body{width:748px;margin:10px auto;[b]direction:rtl;[/b]}
#c{width:728px;border:1px solid #000;padding:9px;}
</style>
</head>
<body>
<div id="c">test</div>
</body>
</html>

Note that, as in the above example, it is vital to always define the primary text direction in HTML (the

dir

attribute on the

html

element) not just with CSS - CSS is for style only, not for semantics.

Does the above work for you?