IE Dynamic CSS position:fixed; cross-browser solution by LJ

[LazyJim]

It's the best fix for IE not supporing the CSS property "position:fixed;"...

I done an alternative CSS+Dynamic Properties (IE only) solution to make IE do position fixed, and no extra code needed on the element itself!

it's all in the CSS, but scripts probably still have to be enabled in the browser.

IE5+ I think.

check it out the IE version of position:fixed; here!
http://dev.jdenny.co.uk/css/ie_fixed.html

*edit* updated to include a fix for background-position: fixed;

[Distorted]

That's cool. Nice find.

[LazyJim]

Find?

what u mean find?

I never seen this anywhere else I had to make it!!!

[Elysium]

Can i use for a bg image?

[LazyJim]

I don't know, try it

[LazyJim]

It sort of works I think, not finished testing.
I trying to add a patch to the background effect: http://www.meyerweb.com/eric/css/edg...iral/demo.html
But the major problem comes from style rules cascading and so measurements are applied to the parent elements depending on how the CSS selector is written.

[LazyJim]

OK well it would be nice to do it all in CSS (+MSIE expression()s ) but it would be easier in JavaScript...

Does anyone know any mroe about expression() for setting CSS property values?

Specifically I want to know how to reference the current element being worked on by the browser...
for example:
If I hade this HTML
[code:1:d48ef44df6]
<ul id="nav">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>[/code:1:d48ef44df6]
then in my css I wanted to give each <li> a background image with a position that is 0-h where h is the <li>'s distance from the top of the page (for sake of argument I have a javascript funciton to work out h called getH(oElement) and it takes the element as a parameter)
[code:1:d48ef44df6]
#nav li {
background-image: url('my_bg.gif');
background-position: expression("0 "+getH({reference to current element}) );
}
[/code:1:d48ef44df6]
{reference to current element} is the thing I need, it is a reference to the <li> element that the CSS is currently working on.

having access to {reference to current element} would save me having to do this:
[code:1:d48ef44df6]<ul id="nav">
<li id="nav_item_1">list item 1</li>
<li id="nav_item_2">list item 2</li>
<li id="nav_item_3">list item 3</li>
<li id="nav_item_4">list item 4</li>
</ul>
<style>
#nav li {
background-image: url('my_bg.gif');
}
#nav_item_1 {
background-position: expression("0 "+getH(document.getElementById('nav_item_1')) );
}
#nav_item_2 {
background-position: expression("0 "+getH(document.getElementById('nav_item_2')) );
}
#nav_item_3 {
background-position: expression("0 "+getH(document.getElementById('nav_item_3')) );
}
#nav_item_4 {
background-position: expression("0 "+getH(document.getElementById('nav_item_4')) );
}
</style>[/code:1:d48ef44df6] which is obviously too much code and too much maintenance.

[Distorted]

By nice find, I mean that you had to find the super uber cool inspiration to think of it.

[LazyJim]

my apolodies, it appears to be the first thing I tried: you can use the "this" special word used in JavaScript - for some reason the first time I tried it, it didn't seem to work!
So anyway {reference to current element} = this

[LazyJim]

Originally Posted by Distorted

By nice find, I mean that you had to find the super uber cool inspiration to think of it.

oooh right! hehehe i'll belive ya!

[LazyJim]

OK check it out I've updated the fix for backgrounds as well...
http://dev.jdenny.co.uk/css/ie_fixed.html

[Distorted]

Wow, it's really improved. Now it doesn't skip like it used to.

This reminds me, I need to learn javascript.

[LazyJim]

I found out how I stopped it skipping and wobbling!

put this CSS in your page for any CSS IE fixed poistion fix you want to use:
[code:1:ddc912613d]body {
background-image: url(false_url);
background-attachment: fixed;
}[/code:1:ddc912613d]

[Vulko]

LazyJim, in this situation it's possible to use position: absolute i think.

[Distorted]

No, position absolute and fixed are two totally different things.

Absolute just makes something a certain number of pixels from the edges when the page loads, but fixed makes that same thing stay, even if the page is scrolled.