Closed
Bug 254503
Opened 22 years ago
Closed 22 years ago
z-index on positioned <div>'s doesn't display correctly.
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
People
(Reporter: rickywalt1, Unassigned)
Details
User-Agent: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.2) Gecko/20040803
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.2) Gecko/20040803
I am trying to display two colored bars behind the page text, one positioned on
the left and one on the right. The easiest way to do this is define some
absolutely positioned empty <div>'s with the background-color set. Here is the
code I use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>New Page 1</title>
</head>
<body style="width:300px">
<div style="background-color: silver; z-index:-1; position:absolute; left: 10px;
top: 10px; width: 100px; height: 200px">
</div>
<div style="background-color: silver; z-index:-1; position:absolute; left:
200px; top: 10px; width: 100px; height: 200px">
</div>
<div>
<p style="float:right">this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
</div>
</body>
</html>
This should display two columns of text with a silver bar behind each. This
works in (shoot me now) IE6.1 and Opera 7.5.
Reproducible: Always
Steps to Reproduce:
1.Open your favorite web page editor.
2.In HTML view, paste in the following text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>New Page 1</title>
</head>
<body style="width:300px">
<div style="background-color: silver; z-index:-1; position:absolute; left: 10px;
top: 10px; width: 100px; height: 200px">
</div>
<div style="background-color: silver; z-index:-1; position:absolute; left:
200px; top: 10px; width: 100px; height: 200px">
</div>
<div>
<p style="float:right">this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
<p>this is some body text</p>
</div>
</body>
</html>
3.Save the file as .htm or .html to your favorite spot.
4.Open/view the file in Mozilla
Actual Results:
No silver bars behind the text.
Expected Results:
Displayed silver bars behind the text.
|
||
Comment 1•22 years ago
|
||
Mozilla's rendering is correct per CSS2.
CSS2.1 has changed the definition of z-index for negative z-indices a bit, and
we haven't had time to update to the new definition yet...
*** This bug has been marked as a duplicate of 78087 ***
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•