While I realize what I am trying to accomplish requires a lot of css, I
don't see it being fully implemented without JS. I have provided an
example from the Trac system that provides a progress meter. However I
want to accomplish the same thing but on elemnts on a web page where
the width is not defined, and the elements being effected are inline
like span tags.
My current thought on implentation:
I could use the offsetWidth, offsetHeight, offsetTop, offsetLeft on the
target inline element. Then dynamically create my structure in the same
place but use z-index to make sure it is positioned under the original
element. Does this sound workable or am I going down the wrong path?
<html>
<head>
<style>
.progress {float:left; border:1px solid #d7d7d7; width:40em;
max-width:80%}
.progress div {background: #bae0ba; height:1.2em}
</style>
</head>
<body>
<div class="progress">
<div style="width: 70%"></div>
</div>
</body>
</html>
variable width background on inline elements 
