CSS - change position absolute left to right in IE

Question

How i can override this declaration, i can do something like this

div.someClass {position:absolute; left:10px; top:20px}

i want this -----------------------------
div.myClass div.someClass  {position:absolute; RIGHT:10px; top:20px; left:auto;}

You can say, that it should work if I set left:auto; but it is not working in IE6, i didn't check what happen in IE7, IE8.

How to change position using only css - some ideas ?

Answer 1

You mean that you want the "myID" div to not obey that rule, even though it has class "someClass"? Then you'd just put this after your ".someClass" rule:

div#myId { right: 10px; left: auto !important; }

(The "!important" might not be necessary; try it with and without that, and if it works without it then leave it off.)

If you mean that you want all <div> elements with class "someClass" that appear inside a <div> with "id" "myId", then your selector is OK but try that "!important" suffix.

Here's a sample showing that setting "left" to auto definitely works: http://gutfullofbeer.net/leftright.html

Answer 2

i thing - real problem is the IE does not have any idea what it SHOUL DO with AUTO delaration

Answer 3

This is one of the problems with CSS: How do you "unring" that bell, once a certain type of rule has been set?

Assuming your div is not in a container that does not have its left value set already, you could try this:

div#myId div.someClass {
  left: inherit;
  right: 10px;
  /* etc. */
}

Note that you could have saved yourself some trouble by not declaring div.someClass in the first place. The extra element in the selector is just unnecessary weight. If your selector had been .someClass you could have overridden it merely by adding div.someClass.