101084 - [FIX KNOWN]dotted lines do not hug image (no margin at bottom of <form> in <td>)

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Niels Aufbau]

The dotted lines above and below the photocollage on http://www.np.edu.sg/ do
not hug the image in Mozilla.  In other browsers, there is no space between the
dotted lines and the image.

The spaces are caused by a rowspan=6 column at the right containing an image
with a fixed width of 382 (300 in the testcase).  Because of differences in the
way Mozilla handles form margins, the total of the *minimum* heights for each of
the cells is smaller than 300, and Mozilla compensates (as would any other
browser) by increasing the height of some of the rows of the table.

Instead of using a fixed-height image, the page could have give the column a
white or transparent background.  Alternately, the extra column could be removed
from the page.  Or Mozilla could change its handling of form margins to be in
line with IE and Netscape 4 :)

I searched for bugs about form margins and only found bug 41806 and bug 30988.

Comment 1

[Niels Aufbau]

Attachment: testcase - similar to original page but simplified

Comment 2

[Niels Aufbau]

Attachment: simplified testcase - shows how different browsers do form margins in tables

Comment 3

[Boris Zbarsky [:bzbarsky]]

Um... I would say that this is a duplicate of bug 41806....

Comment 4

[Boris Zbarsky [:bzbarsky]]

hmm... actually.... nevermind.

The reason for the lack of margin is this rule in quirk.css:

td > form:last-node { margin-bottom: 0 }

Why do we have this quirk?  Over to forms.  ccing hixie.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Ian, can't we just remove this quirk that IE and NS4 do not have?

Comment 6

[Hixie (not reading bugmail)]

You can remove all the quirks, as far as I am concerned. The fewer we have the
better for QA, the better for the Web, and the better for maintenance.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Could someone with access to IE test the various elements we have listed at
http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/quirk.css#149
and see what IE does with them in a <td>?  I tested a random sample (<form>,
<h1> <blockquote>) in NS4 and NS4 does leave the bottom margin on them (though
not on <p>).

Comment 8

[Martijn Wargers (dead)]

Attachment: Testcase I used to see how IE6 handles margins inside table cells

Comment 9

[Martijn Wargers (dead)]

Attachment: Screenshot of how IE6 renders the testcase

I didn't use <plaintext> in the testcase, it was too weird in IE :)

Comment 10

[Martijn Wargers (dead)]

Attachment: This is the good testcase

Aarrgghh, forget that. Sorry, I had some errors in that testcase. This is a
good one.

Comment 11

[Martijn Wargers (dead)]

Attachment: The good screenshot

Comment 12

[Boris Zbarsky [:bzbarsky]]

OK, so looks like we should in fact remove most of our td-related margin quirks
(barring <p>, of course).

Martijn, what do you get if you have more than one node as the child of the
<td>, if I may ask?   So if you have:

  <td><form></form><form></form></td>

and similarly for the other tags.

Comment 13

[Martijn Wargers (dead)]

Attachment: Another screenshot made following comments from comment 12

This is a screenshot of IE6 following with a testcase made by following the
comments from comment 12.
Just ask if I need to upload the testcase itself also.

Comment 14

[Boris Zbarsky [:bzbarsky]]

Yes, please upload the testcase so we know what we've tested.  ;)

Comment 15

[Martijn Wargers (dead)]

Attachment: The testcase made following comments from comment 12

Ok, here it is...

Comment 16

[Boris Zbarsky [:bzbarsky]]

What if you put text in both of the forms in the table cell?

Comment 17

[Martijn Wargers (dead)]

Attachment: Screenshot of IE6 with two forms and text inside table

IE6 renders the extra margin.

Source:
<table><tbody><tr><td><form>This is a form.</form><form>This is a
form.</form></td></tr></tbody></table>

Comment 18

[Martijn Wargers (dead)]

Attachment: Patch which removes margin-bottom rules except for p

This makes the rendering of Mozilla in quirks mode more in line with IE6.

If that's the purpose of quirk.css, then I know a case in which Mozilla in
quirks mode handles the margin of a p tag different inside a table cell .
This: <table><tr><td><p></p><p>this is a p</p></td></tr>
gets a top margin from the second p element, but this does not happen in IE6.
Should that case of IE-quirkiness also be covered?

Comment 19

[Martijn Wargers (dead)]

Thanks David. I can't do checkins. Could you do the checkin for me? Thanks.

Comment 20

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 151305 [details] [diff] [review]
Patch which removes margin-bottom rules except for p

sr=bzbarsky

Comment 21

[Boris Zbarsky [:bzbarsky]]

Checked in.

Comment 22

[[e-mail]]

This broke bonsai diffs :-(

Comment 23

[Boris Zbarsky [:bzbarsky]]

> This broke bonsai diffs :-(

How so?