266909 - background-color in <div> is being ignored when it contains a floating list

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Tony Marston]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1

My HTML 4.01 document contains the following stylesheet declaration:

<style type="text/css">
    <!--
      #menubar { width: 100%; background: #cceeff; }
      #menubar UL { padding: 0px; margin: 0px; list-style-type: none; }
      #menubar LI { float: left; display: block; padding-left: 2px; padding-
right: 2px; }
    -->
    </style>

When used with the following code the background colour is not shown.

<div id="menubar">
<ul>
<li>Menubar Item 1</li>
<li>Menubar Item 2</li>
<li>Menubar Item 3</li>
</ul>
</div>

Reproducible: Always
Steps to Reproduce:
1. Run the smaple code from http://www.tonymarston.net/firefox.html

Actual Results:  
The background colour specified for the <div> is not shown.

Expected Results:  
The background colour for the <div> should be shown for the entire area 
occupied by the ,div>, which emcompasses all elements within the <div>.

Comment 1

[Bill Mason]

Your DIVs have an effective height of 0, because all the content in them is
floated.  So you can't see the background color.

->Invalid

Comment 2

[Tony Marston]

Then how do I give the div a line-height whuch is greater than zero?

Comment 3

[Bill Mason]

I haven't played with it to see.  This isn't a CSS support form.  Don't reopen
bugs to ask CSS questions.

Comment 4

[Tony Marston]

This is a bug in the way that your browser implements the CSS rules. DIV is a 
container that does not need to have any sizes specified as it becomes as big 
as all those items which it contains. This should happen whether they are 
floating or not.

I do not have this problem with IE or Opera, so your implementation is at 
fault. FIX IT!

Comment 5

[Uri Bernstein]

The fact that this "works" in IE is due to an IE bug. See:
http://www.positioniseverything.net/easyclearing.html

(You might also want to read
http://www.positioniseverything.net/articles/float-theory.html first to see why
comment #4 is utterly wrong).

Anyway this is a duplicate of numerous bugs, all resolved as INVALID: see e.g.
bug 194687, bug 207466, bug 208924 and bug 210703 (I got tired at this point).

Resolving as INVALID.

Comment 6

[Uri Bernstein]

Also bug 239577, especially bug 239577 comment #2 and #3.

Comment 7

[Tony Marston]

(In reply to comment #5)
> The fact that this "works" in IE is due to an IE bug. See:
> http://www.positioniseverything.net/easyclearing.html
> (You might also want to read
> http://www.positioniseverything.net/articles/float-theory.html first to see 
why
> comment #4 is utterly wrong).

I have read those articles several times and cannot see anything about the 
containing <div> not knowing the height of the floating child element. One 
talks about problems with width while the other talks about clearing after 
floating divs. As I cannot see anywhere which explains that what I am trying 
to do is wrong, or offers a method that actually works, I still hold the 
opinion that the bug is within your browser. This is reinforced by the fact 
that it works as expected in other browsers.

Comment 8

[Boris Zbarsky [:bzbarsky]]

> I have read those articles several times and cannot see anything about the 
> containing <div> not knowing the height of the floating child element.

The key is that floats are "out of flow".  This means they do not affect the
sizes of parents.

> This is reinforced by the fact that it works as expected in other browsers.

This is a known bug in Opera that they are working on fixing.  IE's rendering of
CSS is just generally very broken.  Safari/KHTML render this like Mozilla does.

Marking invalid.  Please do not reopen this again.