R
Ryan Stewart
In IE 6.0, I observe that if:
1) a box has a background color and a border and is relatively
positioned and,
2) a child of the box described in 1) is floated, and
3) the boxes are rendered such that the area of box 2) is within the
area of box 1),
then IE renders the child box behind the parent box. The code below
demonstrates the effect. Removing any one of the background color,
border, or "position: relative" will cause it to work as expected. Is
there some other known workaround?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
#container { background-color: #fff; border: 1px solid
black;
position: relative; }
#floating { float: left; }
</style>
</head>
<body>
<div id="container">
<div id="floating">
This is floated left
</div>
<p>
This is just some text
</p>
</div>
</body>
</html>
1) a box has a background color and a border and is relatively
positioned and,
2) a child of the box described in 1) is floated, and
3) the boxes are rendered such that the area of box 2) is within the
area of box 1),
then IE renders the child box behind the parent box. The code below
demonstrates the effect. Removing any one of the background color,
border, or "position: relative" will cause it to work as expected. Is
there some other known workaround?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
#container { background-color: #fff; border: 1px solid
black;
position: relative; }
#floating { float: left; }
</style>
</head>
<body>
<div id="container">
<div id="floating">
This is floated left
</div>
<p>
This is just some text
</p>
</div>
</body>
</html>