I wanted to set a 2-tone, full-window background to my page:
<body>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: 96C3FF"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: BEC0C2"></div>
<div id="mainDiv">...</div>
</body>
This works great on Chrome and IE8 but not on FF3. I thought maybe I need to set the height on body to 100%, but that doesn't help.
If I remove the z-index, they're visible properly on all 3 browsers but drawn on top of mainDiv... and setting mainDiv's z-index to 1 doesn't do anything.
I didn't think any of this was that unusual... any ideas?