Closed Bug 262384 Opened 18 years ago Closed 17 years ago
Background color line in css doesn't seem to work when set to #000000
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Build Identifier: FireFox 1.0 Preview I made this site myself, it is W3C Compliant CSS code. It displays fine in Internet explorer, but does not appear to display correctly in FireFox. Specifically, FireFox does not seem to recognize the "background- color:#000000;" line under my footer division. This is unusual because all the rest of the background color lines work fine. Reproducible: Always Steps to Reproduce: 1.Just view the site 2. 3. Actual Results: Footer is not displayed correctly Expected Results: Display the page just like Internet Explorer 6.0 does. It is, afterall W3C compliant code...
This is the actual style sheet used in www.fbcamelia.org
This simplified testcase demonstrates the situation: The red-bordered div is floated to the left inside a div of the same width. The text contained in the yellow-background div (analogous to the black-background footer in the original example) can not be placed to the right of the floated div, because there is no place for it there. It is therefore pushed undernieth it. The yellow div itself, however, starts at the top, regardless of the float. But since its height is fixed (at 50px in this example), it does not reach the bottom, where the text contained inside it is displayed. I'm not sure if this is a bug or not (I suspect it isn't). Safari behaves the same way. Jeremy: to make your page display correctly in Firefox and Safari, simply add "clear:left" to the #footer style. This will cause the footer div to start below the three floated column divs.
I have found a possible workaround, especially if using background-color and background-image, comebine them into background: <color> url(<urlofimage>);
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050831 Firefox/1.0+ ID:2005083106 Behavior persists in above nightly.
Moving to Core/Style System.
Component: General → Style System (CSS)
Product: Firefox → Core
Version: unspecified → Trunk
Behavior looks correct to me, and not a style system bug in any case. Don't use 'height' when you mean 'min-height'.
Status: NEW → RESOLVED
Closed: 17 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.