Rendering failure on CSS nested blocks




15 years ago
15 years ago


(Reporter: Richard Aspden, Unassigned)


Windows XP

Firefox Tracking Flags

(Not tracked)




(3 attachments)



15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a; MultiZilla v1.4.0.4A) Gecko/20030528
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a; MultiZilla v1.4.0.4A) Gecko/20030528

On any of the item pages on this test site, e.g. , Mozilla is
rendering the CSS blocks incorrectly. It is expanding them further than they
should be, and we've attempted various rewrites of the source code to accomodate
this in case it was a compliance error, but it passes all tests. This renders
correctly on Phoenix 0.5 and IE 6, suggesting that the error started to occur in
the Mozilla 1.3a rendering engine and above. The problem also occurs in the
Firebird 0.6 release, and the latest nightly.

(Please note that this site is a test site, and the actual content may vary as
we mess with the database, but the design and this problem will be staying the
same unless it's a daft error on our part.)

Reproducible: Always

Steps to Reproduce:
1. Load up the page. Displays incorrectly.

Actual Results:  
Incorrect CSS render.

Expected Results:  
Correctly rendered the CSS title, and placed it with the rest of the item box.

We've been unable to find any other sites where this occurs, hence the
suspecting the CSS or the background code, but we've been unable to find an
actual fault. Short of going back to using tables, there seems no viable
workaround at the moment to display this correctly in Mozilla.

Comment 1

15 years ago
Also occurs on a Win2K machine as well as the XP Pro machines. Creating a
Severity: normal → major

Comment 2

15 years ago
Created attachment 124351 [details]
Screenshot of incorrect render

Screenshot taken as from Mozilla 1.5a nightly. Same results on 1.3.1 and 1.4b,
and Firebird 0.6
Could you make a small (less than 1kb) self-contained page showing the problem
with nothing else on the page? It would aid us with debugging. If you don't have
the time then one of us can do it but since you are familiar with the page, you
could probably do it quite quickly.

Comment 4

15 years ago
Doing it now, just including the relevant CSS inline. Hang tight.

Comment 6

15 years ago
Created attachment 124357 [details]
Code causing the problem

This file is the same as the one located at - sorry, I couldn't get the
offending code lower than 2.94KB without it losing the context it was in. Hope
that helps though. However, this does show the bug without all the fluff, and
just rewritten to show exactly what each DIV is supposed to be / contain, and
still demonstrates the bug.

Comment 7

15 years ago
Forgot to mention - we shifted the CSS code in question inline, to make it
easier for debugging.
Created attachment 124359 [details]
A simplified version of the same test case
This is what I meant by "small (less than 1kb) self-contained page showing the
problem with nothing else".

It shows that in fact this bug is INVALID. You have some floats that are flowing
out of their parent element, and pushing the text of subsequent elements down,
thus making those elements grow.

You should be able to work around this by adding:

   .itembox { clear: both; } your stylesheet.
Last Resolved: 15 years ago
Resolution: --- → INVALID

Comment 10

15 years ago
Oops! My apologies. I couldn't see it a mile off.
I shall never hallow these halls with my lousy CSS again. *chuckle*
You need to log in before you can comment on or make changes to this bug.