96966 - <th><p>xyz</p></th> inserts additional vertical space

Status: RESOLVED DUPLICATE of bug 33784

(Core :: Layout: Tables, defect, P4)

Description

[mozilla]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.3+)
Gecko/20010824
BuildID:    2001082403

<th><p>xyz</p></th> inserts additional vertical space in mozilla.
It doesn't in IE 6. It is not expected to in mozilla.

Note the inconsistency between <th> and <td> handling in mozilla:
<td><p>xyz</p></td> does NOT insert additional vertical space in mozilla.
This is as expected.

Reproducible: Always
Steps to Reproduce:
1.  Visit the url above.
2. Compare header and content cells.
2. Open IE and compare header cell rendering.

Actual Results:  See above.

Expected Results:  See above.

HTML page has the following header  info:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Page has been validated in HTML-Tidy and with w3.org HTML and CSS validation
tools (see tag on page).

Comment 1

[Mats Palmgren (inactive)]

Elements are two levels deep inside the TH:
<th>
<strong><p>Welcome back&nbsp;johnb!</strong></p>
</th>

There is a quirk to solve 1-level deep stuff like <th><p>... but not for
arbitrary deep <p>'s, for example <th><font><string><span>...<p>

If you change your page to <th><p><strong>Welcome...  it should work.

*** This bug has been marked as a duplicate of 33784 ***

Comment 2

[mozilla]

1.) I corrected my error in the first table (which has 2 levels), but it still 
renders as before. This is contrary to your expected outcome.

2.) Perhaps you didn't look at the HTML code behind the second table (a 
similar header with only one level)? It also displays the extra vertical 
spacing, when it is expected to collapse that space.

3.) <td> cells collapse the space with identical code but for the cell type.

Again, I think the issue is that the "quirk" may be compensated for in <td> 
and <div> tags but not in <th> tags. For a simplified demonstration, see:

http://www.shepherdstown.com/mozilla/th/test.htm

Comment 3

[Mats Palmgren (inactive)]

Oops, you are right of course, there is no quirk for TH. My mistake.
Confirming. -> HTMLTables.

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 5

[Mats Palmgren (inactive)]

Nav4.7 and IE5 collapses top and bottom margins, Opera5 collapses top but NOT
bottom margins for the first child of a TH.

Marc, I think we should extend quirk.css to do the same for TH as currently
for TD (margin-collapse of :first-node and :last-node).

Comment 6

[Marc Attinasi]

That's a bunch of extra rules - is it that important? I'm really asking - I
don't see TH much myself. CC'ing some othther table friends too.

Comment 7

[bugzilla]

Well, the first reason is standards compliance: <th> is a valid HTML 4.01 tag 
and there are discrepancies between how <td> and <th> are handled in Mozilla. 
This particularly important given Mozilla's emphasis on standards compliance.

Second, there is the competitive reason: IE collapses the vertical space on 
both <th> and <td>; Mozilla only collapses <td>.

My reason for using <th> is that it allows one further level of abstraction 
when using CSS. You simply assign one CSS dec to the headers and another to 
the contents of other cells, with perhaps another dec for the table as a 
whole. This is very useful in dynamically created web pages.

Web site developers are also smart to use <th> tags to allow easier 
identification of the data by different user agents. The disparate treatment 
of <th> and <td> by Mozilla should not have a chilling effect on web site 
developers using <th> tags--i.e. using <td> tags throughout so that they can 
maintain a consistent look and feel in Mozilla.

Perhaps a related question is why use <th><p>xyz</p></th>?

There are two reasons:
1.) Some validators dislike <th>content1<p>content2</th>, insisting that all 
content within <td> be contained within a container. Using 
<th><p>content1</p><p>content2</p></th> solves this issue.
2.) Perhaps more importantly, if you have a <p> dec, content1 is rendered with 
different css rules than content2. Using 
<th><p>content1</p><p>content2</p></th> ensures uniform application of css 
rules.

I am not sure where the vertical space collapse rule is stored but it would 
seem to me that instead of creating a wholly new set of rules for <th> that 
you might be able to combine the references to <th> with <td> in the same way 
that you combine css styles for various tags.

Comment 8

[Marc Attinasi]

Thanks, [e-mail] - I wonder why this is a quirk then... Maybe
our C++ margin collapsing code is broken (not an area I am very familiar with).

Comment 9

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

The reason this is different is that the rules in quirk.css don't mention th.

Comment 10

[rubydoo123]

moving to future until final triage

Comment 11

[Bernd]

attinasi will probably not work on those bugs :-(

Comment 12

[Boris Zbarsky [:bzbarsky]]

Our quirks rules are now identical for th and td, so the only remaining issue is
what happens when the <p> is not the first node.

*** This bug has been marked as a duplicate of 33784 ***