PDA

View Full Version : Negative z-index redux



bugman
Nov 13th, 2006, 10:08 AM
I have a page I'm trying to get working on both, IE and Firefox, but I'm running into a problem with the latter. Basically, I use javascript to create a background of randomly placed and colored divs. After reading some posts around the web (especially at mozilla.org), I tried using a negative z-index value for each of those divs and resetting the stack with the recommended body style:



style="position: relative; top: 0px; left: 0px; z-index: 0;"


The negatively indexed divs come out great. (I know. I have to tweak the javascript for correct width and height.) The problem comes with subsequent divs. They display beneath the divs created by the javascript. Can anyone see what I'm doing wrong? Here's the complete test page:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>test</title>
<style type="text/css">
<!-- This is where the title goes -->
#headerbox
{
background-color: #FFFFFF;
color: #000000;
border: 2px solid #000000;
width: 600px;
margin-left: auto;
margin-right: auto;
}
</style>
<script type="text/javascript">
// Creates 300 randomly positioned, sized and colored divs on the page
function test()
{
var hD="0123456789ABCDEF";

function d2h(d)
{
var h = hD.substr(d&15,1);
while(d>15) {d>>=4;h=hD.substr(d&15,1)+h;}
return h;
}

var _w=document.body.clientWidth;
var _h=document.body.clientHeight;
var minW=20;
var minH=15;
var maxW= Math.floor(_w/4);
var maxH= Math.floor(_h/4);
var maxT= (_h-5);
var maxL= (_w-10);
var _z=-600;
var counter=0;
for(x=0;x<300;x++)
{
var _divId = 'bg'+counter;

var _temp=d2h(Math.round((Math.random()*255)));
_red=_temp.toString();
while(_red.length<2) {_red = "0".toString() + _temp};

var _temp=d2h(Math.round((Math.random()*255)));
_green=_temp.toString();
while(_green.length<2) {_green = "0".toString() + _temp};

var _temp=d2h(Math.round((Math.random()*255)));
_blue=_temp.toString();
while(_blue.length<2) {_blue = "0".toString() + _temp};

var _width=(Math.round((Math.random()*maxW)));
if(_width<minW) _width+=minW;
var _height=(Math.round((Math.random()*maxH)));
if(_height<minH) _height+=minH;
var _top=(Math.round((Math.random()*maxT)));
var _left=(Math.round((Math.random()*maxL)));
_styleText='background-color: #'+_red+_green+_blue+'; height: '+_height+'px; width: '+_width+'px; position: absolute; top: '+_top+'px; left: '+_left+';';
_div=document.createElement('DIV');
_div.setAttribute('id',_divId);
_div.style.cssText=_styleText;
_text=document.createTextNode(' ');
_div.appendChild(_text);
document.body.appendChild(_div);
counter++;
_z+=2;
} // end for x=0
} // end function test()
</script>
</head>
<body style="position: relative; top: 0px; left: 0px; z-index: 0;" onLoad="test();">
<div id="headerbox">
This page was created using zero graphics.
</div>
</body>
</html>