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

RESOLVED INVALID

Status

()

RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: tony, Assigned: bugzilla)

Tracking

1.0 Branch
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

14 years ago
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

14 years ago
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
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

14 years ago
Then how do I give the div a line-height whuch is greater than zero?
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

Comment 3

14 years ago
I haven't played with it to see.  This isn't a CSS support form.  Don't reopen
bugs to ask CSS questions.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago14 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

14 years ago
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!
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago14 years ago
Component: General → Layout: Floats
Product: Firefox → Browser
Resolution: --- → INVALID
Version: unspecified → 1.0 Branch
Also bug 239577, especially bug 239577 comment #2 and #3.
(Reporter)

Comment 7

14 years ago
(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.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
> 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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago14 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.