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>

Solution

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