Home/ Questions/Q 6999645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:34:07+00:00

somehow the CSS overrides (left|right) under dir=rtl don’t seem to work. To verigy –

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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" */
}
    • 0