homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Auto Margin on RTL Pages
aeae

5+ Year Member



 
Msg#: 3482723 posted 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>

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

 

encyclo

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



 
Msg#: 3482723 posted 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved