Closed
Bug 207466
Opened 22 years ago
Closed 22 years ago
Floating DIV doesn't use its (non-floating) parent DIV's background
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: stevenrafter, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
646 bytes,
text/html
|
Details |
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3.1) Gecko/20030425
If you have a DIV with a certain background colour, and it contains one or more
divs that are floating, the background colour of the floating one(s) is taken
from the BODY, rather that the parent DIV.
This equally applies to background images. It may apply to other elements
displayed as blocks, but has been only encountered with DIVs
Reproducible: Always
Steps to Reproduce:
The following code, which is valid XHTML and CSS, will produce the unexpected
results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bug!</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
body { background: red; color: black; }
.outer { background: blue; color: black; }
.inner { float: left; width: 40%; }
//-->
</style>
</head>
<body>
<div class="outer">
<div class="inner">this is a div that should have a blue background</div>
<div class="inner">this is one too!</div>
</div>
</body>
</html>
Actual Results:
A page with a red background and black text appears, but the text does not have
a blue background.
Expected Results:
The text contained within the 'inner' DIVs should have a blue background.
One could change the definition of the inner DIV to inherit the background:
.inner { background: inherit; float: left; width: 40%; }
However, if images are used as a background instead of colours, the images are
positioned relative to the inner DIVs rather than the outer DIV.
|
||
Comment 1•22 years ago
|
||
This is the same as in the Description except that I added a border on the
outer DIV to illustrate that it has zero height and the floaters are below it,
which is the reason for the red background.
|
|
||
Comment 2•22 years ago
|
||
Floaters do not add to the containing block's height.
See http://www.w3.org/TR/CSS21/visudet.html#q19
--> INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•