How to remove a CSS expression rules
In CSS you can use the inheritance to override some CSS rules with other values only for particular cases. For example:
#myElement {
position: absolute;
top: 0;
}
#myElement.fixed {
position: fixed;
top: 100px;
}
This code will position an element 100px lower if class “fixed” is applied to it (via javascript for example). But this will not work in MSIE if you use an expression (I know it’s evil but sometimes expressions are much better for user experience, believe me).
Example:
* html #myElement {
top: 0;
}
* html #myElement.fixed {
top: expression(document.documentElement.scrollTop + 100 + 'px');
}
This will add an expression for element if class “fixed” is applied, but will not remove it by removing the classname. To properly remove the expression and apply a static value you should “clear” the expression by doing the following: expression: ('');
Finally, correct example:
* html #myElement {
top: expression('');
top: 0;
}
* html #myElement.fixed {
top: expression(document.documentElement.scrollTop + 100 + 'px');
}
Putting it all together:
/* Modern browsers */
#myElement {
position: absolute;
top: 0;
}
#myElement.fixed {
position: fixed;
top: 100px;
}
/* Emulating in IE6 */
* html #myElement {
top: expression('');
top: 0;
}
* html #myElement.fixed {
top: expression(document.documentElement.scrollTop + 100 + 'px');
}
Thanks @Dave for the suggestions.
