PDA

Click to See Complete Forum and Search --> : z-index problems...

Dudsmack
12-01-2003, 09:20 PM
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?
Paul Jr
12-01-2003, 09:38 PM
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:outset 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>
Dudsmack
12-01-2003, 09:58 PM
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.