318533 - styles "padding-top" and "padding-bottom" seem to be applied incorrectly (in table cells)

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Ulrich Windl]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050921
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050921

padding-top and padding-bottom when applied to stacked spans in a table cell seem to be applied in an unpredicted way. However Microsoft Internet Explorer 6 seems to do the same thing.

Reproducible: Always

Steps to Reproduce:
1. Load test case (attachment foo.html)

Actual Results:  
Padding exceeds table cells

Expected Results:  
Table cells should adjust to contents

Comment 1

[Ulrich Windl]

The problem also occurs with Mozilla on Linux.

Comment 2

[Ulrich Windl]

Attachment: test case compressed with bzip2 (7-ZIP actually)

The intention of the layout is to represent a time table of some kind with the yellow areas being appointments.

Comment 3

[Ulrich Windl]

Attachment: Screen shot for test case with Firefox 1.0.7 (Windows/XP)

Comment 4

[Ulrich Windl]

Attachment: Screen shot with test case for W3C's Amaya 9.0

That version of Amaya (as well as the 8.2 version) renders the table as I would expect. However Amaya is terribly slow doing so...

Comment 5

[Dave Townsend [:mossop]]

Please attach testcases as html.

Comment 6

[Daniel.S]

Even if Amaya is meant as some kind of reference implementation, I wouldn't take its rendering as definite. If you look closely, it doesn't render your page correctly.

However, Firefox does. Look, span elements are inline elements thus they take part in the line model. That simply means that vertical margin, border and paddings are rendered but not taken into account for the height calculation.

This simply means that the table cell only gets the height so the text in the last span is rendered inside. The yellow background-color is rendered outside because of the elements padding.