Very good info here:

So now I took an ‘assistance’ property which is self-overwritable, let this be clear. Watch it, it’s only used as a dummy assistance property. Then set the value of background-position in it, which is not self-overwritable, and lastly overwrote the assistance property. This trick even allows us to avoid function creation:

.elem {

background-position: inherit;

*clear: expression(

style.backgroundPosition = parentNode.style.backgroundPosition,

style.clear = “none”

// debug:

, window.expc = window.expc || 0,

window.defaultStatus = expc++

);

}

This is it. The menu was absolutely responsive. The expression runs only one time. You can experiment, the debug lines show the number of executions in the browser’s status bar. I think it is the recommended way of CSS expression usage with any CSS property, when working around compatibility issues.

It’s important to note that you cannot use the underscore hack (_clear) in case of expressions intented only for IE6, because it will run on IE7 too. In such situations you have to separate it by other ways.

UPDATE

Yet, it’s still not the end, there’s another catch. If you remove the debug lines from the above example, IE gently will hang up. Put a simple value, e.g. a 0 in place of that, and it will work:

.elem {

background-position: inherit;

*clear: expression(

style.backgroundPosition = parentNode.style.backgroundPosition,

style.clear = “none”, 0

);

}

Pasted from <http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html>

Tags: css, webdesign

In the third example above, hasLayout is given with zoom:1, and height:0 for IE5.0 (again to cover all versions.)

Pasted from <http://www.brunildo.org/test/InlineBlockLayout.html>

I don’t care about IE5 anymore, so I’m not including the height:0. I don’t know of a quick hack like the * and _ hacks to apply only to IE5 and lower, so not worth my while.

Use this to get the same behavior in IE as you get in firefox when using display: inline-block

Element {

Display: inline-block;

*display: inline;

*zoom: 1;

}

Here is the difference in IE:

(no *zoom:1; *display:inline; css rules)

(with *display: inline; *zoom:1; css rules)

Tags: css, webdesign

Wow, this is awesome!

To get around the inadequacies and bugs of IE6 and IE7, I see people going to great lengths and even adding a second stylesheet with conditional comments when we all preach at the same time to minimize HTTP requests.

Complicated hacks and workarounds all take more time. And time is money in the business world (especially to support a dying user base).

And there you have it. That’s all you have to do. Stop wasting your time, your client’s money, your users’ bandwidths, and your otherwise zen disposition.

Pasted from <http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/>

Tags: css, webdesign