Welcome to WebmasterWorld Guest from 54.198.87.238

Forum Moderators: not2easy

Message Too Old, No Replies

Auto Margin on RTL Pages

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

5+ Year Member



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>

<body>
<div id="c">test</div>
</body>
</html>

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

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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?

 

Featured Threads

Hot Threads This Week

Hot Threads This Month