22609 - Stylesheet rendering incorrect

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Rob Kaper]

Compared to M11 css rendering in M12 creates some problems, especially with the
overflow property in layers and the rendering of the background image from the
body tag when layers are placed on top of it. Compare
http://capsi.cx/img/capsi-mozilla11.jpg with
http://capsi.cx/img/capsi-mozilla12.jpg. Style sheet source code is available on
http://capsi.cx/styles/capsi.css and is based on the Viewer Demo example "More
fixed positioning".

Comment 1

[Pierre Saslawsky]

It works for me now in Mac and WinNT.
Chris: if it's still broken on Unix, please mark as a [PP] issue and reassign to
an XHead (pollmann for instance).

Comment 2

[Rob Kaper]

Just tested again on Linux with M13+M11 and Windows NT with M13 and the problem
remains. I have played with the stylesheets and narrowed it down to the
"autoflow: auto" and "position:fixed" properties. I will create an attachement
with a M13/M11 screenshot comparision.

Comment 3

[Rob Kaper]

Attachment: Screenshot of M13/M11 rendering comparision.

Comment 4

[Pierre Saslawsky]

Cap, you really have a nifty site: nice use of CSS! It works now. I saw that you 
had worked around some problems by sending slightly different versions of the 
page to IE, Nav and Moz.

The page still shows some minor problems though... When it is made very narrow, 
the overflows and over-constraints make some elements to be positioned "where we 
can" and it doesn't look too good. On top of it, in these particular cases, there 
is a bug in Moz that causes some bitmaps to be duplicated. For instance when you 
make the window narrow enough, the word "Paradise" is written underneath "Capsi" 
(we see just a few pixels) and a small part of the bitmap of the penguin is 
duplicated at the right of "Paradise". The problem with the duplicated bitmaps is 
already reported, I'm not sure it will be fixed anytime soon because it only 
happens, I think, when the page itself needs to be fixed.

In your case, I recommend you to:
- remove the [style="overflow: auto"] that are attached to the DIVs
- add "overflow: auto" to "#main".
- add "overflow: hidden" to "#title" and "#header"
After all, that's what is intended: we want scrollbars on the main text and we 
don't want anything to spill outside the other blocks, thus "overflow: hidden".

Comment 5

[Rob Kaper]

Thanks for the tips, I have changed the Mozilla pages accordingly. Unfortunately

I cannot use overflow: auto for MSIE/NS because a) it wouldn't work and b) it

screws up the pages royally.



A few small bugs that are still present in M14:

- when using overflow: auto, layer borders are not shown/drawn.

- scrollbars are not drawn until a resize.



I won't reopen this bug because it would probably duplicate some other one, but

if I cannot find the border/scrollbar issue in Bugzilla when I have time I will.

Comment 6

[Pierre Saslawsky]

<[e-mail]> is in charge of the scrollbars, if you're looking for a 
starting point in bugzilla.
You may want to try with the latest builds. The problem with scrollbars was 
probably fixed.

Comment 7

[Hixie (not reading bugmail)]

Netscape's standard compliance QA team reorganised itself once again, so taking 
remaining non-tables style bugs. Sorry about the spam. I tried to get this done 
directly at the database level, but apparently that is "not easy because of the 
shadow db", "plus it screws up the audit trail", so no can do...

Comment 8

[Hixie (not reading bugmail)]

verified since reporter was happy