So I was expecting problems getting my site design working on IE, but not FF. However after some investigation I've narrowed it down to this simple test case.
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Test</title>
</head>
<body bgcolor="#ff0000" style="margin:0px">
<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 style="border:solid 10px black; height:50%; width:50%"></div>
</body>
</html>
In Chrome it's fine, and the margin change on body makes it look identical in IE8. But in FF3 the two divs are not shown, just the black rectangle on a red background.
If I remove the z-order thing, the 100% height divs appear in FF but on top of the black div.
Why? The reason I want to do this is not obvious in this stripped example, but how can I make it work?
EDIT: I have no doc-type. Copy-paste to a file exactly. I guess this is one of the other problems. The background is the important part, the 3rd div is just to have something else drawn. In IE8/Chrome you see a grey/blue background, in FF3 just a red background.
What would be a fixed solution, including meta/doc-type fixes?