5845 - weird div background color behavior

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[Keith83]

Basically, the background color for the journal on the right side of the page
spills over onto the rest of the page.

The section starting with "Just a quick note about my site" is a separate div
from the journal and is floated to the left. The journal section is just
another div and should wrap around the other div, which it does, but the
background color spills over, so something's wrong.

I've tested it with M4 and most builds since then. IE5 exhibits the same
behavior. If there's any other info I can give you, please ask. Thanks a lot.

Keith

P.S. If you don't have time, don't worry about it, but I have a question. What
is the correct way to link multiple style sheets to a page? The way I have it
now works fine in IE5 (as far as using all the stylesheets), but Mozilla only
reads one of the stylesheets (I think). It didn't work right in Mozilla when I
put them in @import statements within <style></style> either. Please help :).

Comment 1

[rickg]

I can't get to the server. Please resubmit this bug with an attached page.

Comment 2

[Keith83]

Attachment: This is the attachment you requested. (Most irrelevant sections has been removed from the page).

Comment 3

[Keith83]

Attachment: This is an updated test page. Shows the rendering error with dummy text.

Comment 4

[Keith83]

I've just posted a new attachment. This is just an updated test page. You can
now ignore the previous attachment. By the way, the reason the original URL
didn't work was because there was a semicolon after the 'http' instead of a
colon. Sorry about that. Thanks.

Comment 5

[rickg]

The content model looks good; I'm guessing it's yours.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Keith83 - the correct way to link multiple stylesheets is not to use a title
attribute.  A title attribute makes a stylesheet one of the alternatives, and
all but one of the style sheets with a title *become* alternate rather than
preferred.  This is in HTML 4.0 (chap. 14?).

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Mozilla is correct.  The CSS spec says that the inline content flows
around floats, but block-level elements are not changed by the float,
and are drawn behind it.  And yes, IE5 exhibits the same behavior
because it is correct.

However, I think this page may be showing a bug where bad content for the first stylesheet (global.css) prevents the others from being applied.  I'm not sure.  So I'm not resolving it as invalid yet.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The problem I mentioned relates to the second attachment.  It never reflows
because one of the linked stylesheets never comes in, I think.

Comment 9

[Keith83]

"the correct way to link multiple stylesheets is not to use a title attribute"

I don't use any. :) After reading the specs it seems like the way I have it
should work. I think it should also work if I use the same title attribute for
every stylesheet link, but it doesn't work then either. This has always been a
problem when trying to get my styles to work with Mozilla, and I thought it was
just something I wasn't doing according to standards. After reading the docs I
still don't know what I could be doing wrong, and it seems like I'm doing it
right. Could this possibly be a bug in Mozilla? Are there any examples of pages
linking to multiple stylesheets that work in Mozilla?

Anyway, about the subject of the bug report... :)

"Mozilla is correct.  The CSS spec says that the inline content flows around
floats, but block-level elements are not changed by the float, and are drawn
behind it."

Ok, but this seems weird to me. It seems like stuff that is in separate DIVs
shouldn't be able to touch each other. I can't think of a case when it would be
useful to have behavior like this, since if you want to have a style be applied
for the whole section you can just include both DIVs in another DIV. Do you
have any clue as to the rationale behind this design choice for CSS? Do you
know if the same behavior is specified in the CSS1 and CSS2 specs? It doesn't
make sense to me why different types of elements should have different effects
on the surrounding elements when everything is encapsulated in a DIV and
separated from the rest of the page... I'm going to go delve into the specs to
see what I can find, but for now I just wanted to get this out. Thanks!

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

WRT the multiple stylesheets, send me *email* with the example where you're
having a problem.  Mozilla's stylesheet linking is far superior to any other
browser's, so I suspect it's your error.  In any case, it shouldn't be on this
bug.

WRT the floats, there are arguments on both sides.  Perhaps in the future one
will be able to specify which type of floating you want.  However, there are
many reasons for CSS's way:

* your method requires nonrectangular boxes, which CSS doesn't support
  (they're a bit messy)
* You don't want small floats that fit in the margin to bump text out of the
* It's easier to imitate your way using CSS's way than to imitate the effects
  of CSS's way with your way
* It's what the spec says.  That *is* an argument, because it's better for
  compatibility if everyone supports the spec.

Further argument on this should go to the www-style list.

Comment 11

[Hixie (not reading bugmail)]

The one remaining issue (non-relayout due to pending stylesheet) is not a bug,
it is designed that way.

The stylesheet loader class ([SSLC]) waits until all persistent stylesheets are
in before reloading, otherwise a document could end up being styled by only one
of a set of mutually-dependent stylesheets.

The relevant ImportTest test case is test 72.

This bug is thus invalid.