bugzilla.mozilla.org will be intermittently unavailable on Saturday, March 24th, from 16:00 until 20:00 UTC.

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




Layout: Form Controls
17 years ago
4 years ago


(Reporter: Niels Aufbau, Assigned: Martijn Wargers (zombie))



Windows 98

Firefox Tracking Flags

(Not tracked)




(8 attachments, 2 obsolete attachments)



17 years ago
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

17 years ago
Created attachment 50366 [details]
testcase - similar to original page but simplified

Comment 2

17 years ago
Created attachment 50367 [details]
simplified testcase - shows how different browsers do form margins in tables


17 years ago
Keywords: testcase
Um... I would say that this is a duplicate of bug 41806....
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.
Assignee: karnaze → rods
Component: HTMLTables → HTML Form Controls
Ever confirmed: true
QA Contact: amar → madhur


17 years ago
Summary: dotted lines do not hug image (no margin at bottom of <form> in <td>) → [FIX KNOWN]dotted lines do not hug image (no margin at bottom of <form> in <td>)
Target Milestone: --- → mozilla0.9.9


16 years ago
Target Milestone: mozilla0.9.9 → Future
Ian, can't we just remove this quirk that IE and NS4 do not have?
Assignee: rods → form
Keywords: qawanted
QA Contact: madhur → ian
Target Milestone: Future → ---
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.
Could someone with access to IE test the various elements we have listed at
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

14 years ago
Created attachment 148976 [details]
Testcase I used to see how IE6 handles margins inside table cells

Comment 9

14 years ago
Created attachment 148977 [details]
Screenshot of how IE6 renders the testcase

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

Comment 10

14 years ago
Created attachment 148978 [details]
This is the good testcase

Aarrgghh, forget that. Sorry, I had some errors in that testcase. This is a
good one.
Attachment #148976 - Attachment is obsolete: true
Attachment #148977 - Attachment is obsolete: true

Comment 11

14 years ago
Created attachment 148979 [details]
The good screenshot
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:


and similarly for the other tags.

Comment 13

14 years ago
Created attachment 148993 [details]
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.
Yes, please upload the testcase so we know what we've tested.  ;)

Comment 15

14 years ago
Created attachment 148994 [details]
The testcase made following comments from comment 12

Ok, here it is...
What if you put text in both of the forms in the table cell?

Comment 17

14 years ago
Created attachment 148997 [details]
Screenshot of IE6 with two forms and text inside table

IE6 renders the extra margin.

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

Comment 18

14 years ago
Created attachment 151305 [details] [diff] [review]
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

14 years ago
Thanks David. I can't do checkins. Could you do the checkin for me? Thanks.
Assignee: core.layout.form-controls → m.wargers
Comment on attachment 151305 [details] [diff] [review]
Patch which removes margin-bottom rules except for p

Attachment #151305 - Flags: superreview+
Checked in.
Last Resolved: 14 years ago
Resolution: --- → FIXED

Comment 22

14 years ago
This broke bonsai diffs :-(
> This broke bonsai diffs :-(

How so?
Keywords: qawanted
You need to log in before you can comment on or make changes to this bug.