Here's the code:
<div id="statusBar" style="position: relative; width: 225; z-index: 1; border-style: outset; border-width: medium">
<div id="progress" style="position: absolute; width: 50%; height: 100%; background-color: #0000FF; z-index: 2">
</div>
<div id="percent" style="position: absoulte; width: 100%; height: 100%; text-align: center; z-index: 10">
<b>50%</b>
</div>
</div>
Makes a progress bar, simple enough. Yet, the progress DIV is overwritting the percent DIV, despite that fact that perecent has a higher z-index.
Only way I can make it work is when I set progress z-index to negative number, but then progress div doesn't display in mozilla.
What am I doing wrong?I'm not exactly sure what the problem is, but I whipped this up, I'm not sure if it'll do what you want exactly, though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
#statusbar {
width:30em;
height:1.3em;
border
utset 3px;
z-index:1;
}
#progressbar {
width:50%;
height:1.3em;
background-color:#00F;
}
#percent {
position:absolute;
width:30em; /* EDIT Sorry, I realized the 500 px was wrong */
text-align:center;
}
</style>
</head>
<body>
<div id="statusbar"> <div id="progressbar"> <div id="percent">50%</div> </div> </div>
</body>
</html>That does work, and normally I would do something along those lines, *except* I'm working on a javascript function that would automatically create a status bar and then dynamically adjust its content, so I need to keep it in this format.
As to why this z-index thing is having issues...I'm completely stumped.
<div id="statusBar" style="position: relative; width: 225; z-index: 1; border-style: outset; border-width: medium">
<div id="progress" style="position: absolute; width: 50%; height: 100%; background-color: #0000FF; z-index: 2">
</div>
<div id="percent" style="position: absoulte; width: 100%; height: 100%; text-align: center; z-index: 10">
<b>50%</b>
</div>
</div>
Makes a progress bar, simple enough. Yet, the progress DIV is overwritting the percent DIV, despite that fact that perecent has a higher z-index.
Only way I can make it work is when I set progress z-index to negative number, but then progress div doesn't display in mozilla.
What am I doing wrong?I'm not exactly sure what the problem is, but I whipped this up, I'm not sure if it'll do what you want exactly, though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
#statusbar {
width:30em;
height:1.3em;
border
utset 3px;z-index:1;
}
#progressbar {
width:50%;
height:1.3em;
background-color:#00F;
}
#percent {
position:absolute;
width:30em; /* EDIT Sorry, I realized the 500 px was wrong */
text-align:center;
}
</style>
</head>
<body>
<div id="statusbar"> <div id="progressbar"> <div id="percent">50%</div> </div> </div>
</body>
</html>That does work, and normally I would do something along those lines, *except* I'm working on a javascript function that would automatically create a status bar and then dynamically adjust its content, so I need to keep it in this format.
As to why this z-index thing is having issues...I'm completely stumped.