16253 - {compat} FORM margins not backwards compatible

Status: VERIFIED FIXED

(Core :: Layout, defect, P3)

Description

[webmas7]

The "Welcome to CedarNet" is positioned too low on the page, should be up at
the very top. There is <image><br> Welcome to CedarNet, all in side a <nobr>
and a <form>

The layer are also 100% wide, and 0px from left, but run off the right side of
page. They have padding-left: 109px and seem to incorrectly run 109px off the
right.

I have a testcase.

Comment 1

[webmas7]

Attachment: HTML File

Comment 2

[webmas7]

Attachment: CSS File

Comment 3

[troy]

The basic problem here is that we support exactly what the CSS2 spec says, but
that's not what you would expect. Especially if you're used to IE4/5 which
doesn't at all implement the spec.

First the issue of the width. The reason it's wider than the page is because you
specified 'padding-left' of 109px and a 'width' of 100%. That means the computed
width of the content area is 100% and the total box width is larger than the
page.

See section 10.3.7 of the CSS2 spec for details. Note that complicated formula
that describes how the computed values are calculated

Comment 4

[troy]

I forgot to mention, you can use a 'width' of 'auto' (that's the default
value for 'width') and then you get exactly the width you want.

I haven't looked at the second problem mentioned in the bug report yet

Comment 5

[webmas7]

Just a note, the first portion of this bug report is still unsolved. --Eric

Comment 6

[Mats Palmgren (inactive)]

Attachment: testcase

Comment 7

[Mats Palmgren (inactive)]

Second problem is that FORM margin isn't 4.x compatible. Load up my testcase
in IE4, Nav4.7 and Mozilla and look at the form margins.
Testcase also shows that "padding-left:109px; width=100%" behaves differently
in all three browsers.

Comment 8

[troy]

Yes you're right. I meant that I haven't looked at the first problem yet.

Comment 9

[troy]

Your test case looks okay now, and "Welcome to CedarNet" seems to be positioned
at the correct location on the page.

Comment 10

[troy]

I'm unable to connect to cedarnet.forbin.com to check how that page displays.

Comment 11

[troy]

There is the issue that mats pointed out about FORM margin not being 4.x
compatible. Thanks for the test case

Re-assigning to pollmann so he can take a look at the form issue

Comment 12

[Eric Pollmann]

I've got two proposed fixes for this bug.  Both are simply changes to html.css

The first patch is to make our margins backwards compatable with Nav.  This
patch leaves a bottom margin of 1em, but removes the top margin by default.

The second patch is to remove all of our margins by default.  IE 5.0 seems to
have straddled the two approaches.  In the given test case, the top div renders
with a 1em bottom margin, but the bottom div renders with no margins.

CC'ing David Baron, the CSS guru.  David, do you think we should retain this 1em
bottom margin for backwards compatability with Nav or should we axe the margins
altogether?  Thanks in advance for any advice you can offer.

Comment 13

[Eric Pollmann]

Attachment: fix 1 - leave 1em bottom margin, remove top margin

Comment 14

[Eric Pollmann]

Attachment: fix 2 - remove all margins

Comment 15

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

My memory is that the current rules for form elements exist for a reason.   Ian
probably remembers it, and maybe even the relevant bug numbers.

Comment 16

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

Or maybe not.  See bug 1094.

IMO, having the two margins different seems like an awful quirk.

Comment 17

[webmas7]

Just fixing the URL...

Also, I don't like margins unless I specifically define them. I am not sure of
the legalities of my preference...but I am sure there is room for
interpretation ;-)

Comment 18

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

In CSS, you (as a stylesheet author) can't be guaranteed any initial state since
there are UA and user stylesheet rules cascading under your own stylesheet.  The
UA stylesheet rules explain the default formatting of HTML, and should be
generally backwards compatibile so people don't get too upset.

It's not necessarily good to be backwards compatible with 4.x here if all other
browsers differ from 4.x.  Does anybody know what margins other browsers put
around FORM?

Comment 19

[ekrock's old account (dead)]

Marking [HAVE FIX].

Comment 20

[Eric Pollmann]

Nav   4.7  1em bottom margin only
IE    5.0  1em bottom margin some cases 0 margins other cases
Opera 3.61 0.5em(?) top and bottom margins
Gecko      1em top and bottom margins

Does this help?  I can fix this bug easily to look like any of these (except IE
5) but I'm not confident what our defaults should be.  David or Ian if either of
you has preferences, I'd love to hear them.  :)  Thanks!

Comment 21

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

I don't really have any preference...

Comment 22

[Eric Pollmann]

Really odd, this bug is fixed, but I never checked in my change.  Indeed, the
html.css file still reads:

form {
  display: block;
  margin: 1em 0;
}

And according to the CSS spec, this means that both the top and bottom margins
are 1em.  however, I'm seeing only a 1em bottom margin.  This makes us
compatable with Nav, but I don't understand how this got fixed.  Why isn't the
definition in html.css being used?

Pierre, or anyone else, do you know what's up here?  I'll attach a testcase that
shows us fixed (inexplicably) in comparison to what a similar css definition to
that in html.css for form applied to an image.

Comment 23

[Eric Pollmann]

Attachment: Testcase showing Mystery Fix contrasted with Expected

Comment 24

[Hixie (not reading bugmail)]

pollmann: This problem is bug 23388. Marking dependencies.

[Updating Summary to more accurately reflect the issue that this bug appears to
be tracking.]

Comment 25

[Eric Pollmann]

Awesome, good catch!  I'll ignore the Mystery Fix and check in my fix anyway (it
will be needed if 23388 is ever fixed.  I've just got to go through the top 100
sites to see which of the fixes looks best for the largest number of sites.

Comment 26

[Eric Pollmann]

Tested a large number of the "top 100" sites from viewer's test suite.  When I
set both top and bottom margins to 0, many pages looked cramped and different
from both Nav and IE.  Leaving the margins as they are now (0 top and 1em bottom
margins) things look great.

I'm going to check in the first fix, which has no effect, except to prevent this
bug from re-appearing when bug 23388 is fixed.

Comment 27

[Eric Pollmann]

Checked in.

This fix can not be verified other than to notice that margins in the attached
test case are the same as before the fix (no change, no top margin and 1em
bottom margin.)  Thanks!

Comment 28

[Hixie (not reading bugmail)]

This can now be verified properly, since 23388 has been fixed.
I haven't yet, though.

Comment 29

[Chris Petersen]

Fixed in the Feb 21 build.