Home/ Questions/Q 590187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:30:08+00:00

So I was expecting problems getting my site design working on IE, but not

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, were you using a DOCTYPE flag when you test this? You should add whatever DOCTYPE your site is using to get useful results. Add the DOCTYPE and IE will start to act like Firefox (assuming you use the right doc type).

    One thing thats difference is not due to z-index… The browsers are giving your bordered box a different height. Put something in it, or set its height to a non-relative value and they will start to look the same (given the doc type I have).

    I added the DTD XHTML 1.0 Transitional doctype for my tests.

    I think Firefox is behaving correctly. The elements with -1 z-index don’t show because they’re within the body tag. Also, since your body tag doesn’t have a height set, setting a relative height on the contained elements is kind of meaningless. Set a fixed height on the body tag, or set the html and body tag to have 100% height.

    • 0