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.