CODEWITHSUNDEEP
htmlcssoverridingright-to-left
valk
valk

Reputation: 9874

Wrong RTL Layout in HTML - CSS override doesn't work

somehow the CSS overrides (left|right) under dir="rtl" don't seem to work.

To verigy - in Chrome / Firebug: only when disabling the "left" attribute, the overriding "left" (under .dir_rtl #main_search_wrapper) style starts affecting the actual layout.

Looks like a common browsers bug?

Here's a live example of the code below: http://jsfiddle.net/DwRLz/

#main_search_wrapper {
  display: inline-block;
  position: absolute;
  right: 0;
}

.dir_rtl #main_search_wrapper {
  left: 0;
  /* <-- This should override the above style */
}
<body class="dir_rtl" dir="rtl">
  <div id="main_search_wrapper" style="display: inline-block;">
    This should be aligned to the left.
  </div>
</body>

Upvotes: 2

Views: 1583

Answers (2)

Penny Liu
Penny Liu

Reputation: 17388

Try to use bdo tag if you want to align text left.

<bdo dir='rtl'>
   ךלחיעכגדש(&#x202b;This text will go right-to-left.)ךלחיעכגדשךלחיעכגדשךלחיעכגדש
</bdo>

Upvotes: 0

No Results Found
No Results Found

Reputation: 102735

left doesn't necessarily override right, it will use both properties, basically setting them like so:

.dir_rtl #main_search_wrapper {
   right: 0;
   left: 0;  /* <-- This wont override the above style */
}

Try this:

.dir_rtl #main_search_wrapper {
    right: 0; 
    right: auto;   /* <-- This will override the above style for "right" */
}

Upvotes: 6

Related Questions