kp*******@rediffmail.com (K.Prasanna Kumar) writes:
-------------------
| 30 % |
-------------------
But I could not relatively position the two DIVs
inside a Table.If i relatively position the DIVs, two DIVs
are shown one below the other.If i absolutely position the DIVs,
on resizing two DIVs are changing their positions. Is there any way to
relatively position the DIVs ? I am working on IE 6 and NN 7.
Try this:
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Progress Bar Test</title>
<style type="text/css">
.progressBar {
position:relative;
width:100px;
height:1.5em;
text-align: center;
background:white;
color:black;
border:1px solid black;
}
.progressBar .progress {
position:absolute;
top:0px;
left:0px;
width:100px;
height:1.5em;
background:blue;
color:white;
overflow:hidden;
clip: rect(0px,0px,1.5em,0px);
}
</style>
</head>
<body>
<div class="progressBar"><span id="content1">0%</span>
<div class="progress" id="progressID"><span id="content2">0%</span>
</div>
</div>
<script type="text/javascript">
function setProgress(id,pct,cnt1,cnt2) {
document.getElementById(id).style.clip="rect(0,"+p ct+"px,1.5em,0px)";
document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
}
var pct = 0;
function progress() {
pct++;
setProgress("progressID",pct,"content1","content2" );
if (pct<100) setTimeout(progress,100);
}
progress();
</script>
</body>
</html>
---
It fails in Opera, because their implementation of the CSS clip
property only clips the content, not the background. I'll ask them if
that is correct behavior.
/L
--
Lasse Reichstein Nielsen -
lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
