Closed Bug 18854 Opened 20 years ago Closed 19 years ago

[MARGIN-C] vertical margin problem at first/last child (also table)

Categories

(Core :: Layout, defect, P3)

x86
Windows NT
defect

Tracking

()

VERIFIED WORKSFORME

People

(Reporter: Klaus.Malorny, Assigned: buster)

Details

(Keywords: css1, helpwanted, Whiteboard: (py8ieh:examine; remove tables? see also 18203))

Attachments

(1 file)

Platform: WinNT 4.0 SP 5
Versions tested: M10 and Build 1999111408, viewer.exe & mozilla.exe

it appears to me that the 'margin-top' at the first subelement resp.
'margin-bottom' at the last element behaves strange. In table cells, it is
ignored, and in normal text, it behaves like the margin of the enclosing
element.

Example (discussion see below):


<html>
<head>
<style>
.withmargins
{ margin-top: 40pt;
  margin-bottom: 40pt;
}

</style>
</head>
<body>
<table border=1>
<tr>
<td><div class=withmargins>Div 1</div>
<div class=withmargins>Div 2</div>
<div class=withmargins>Div 3</div>
</td>
</tr>
</table>
----<br>
<div style="background: #FFFF00">
<div class=withmargins>Div 1</div>
<div class=withmargins>Div 2</div>
<div class=withmargins>Div 3</div>
</div>
----<br>
</body>
</html>


Description of example: The HTML above contains two test cases. The first is a
table with one table cell. The cell contains three identical <div> elements.
The expected layout is a distance of 40pt between the top border of the cell
and the text "Div 1" and a distance of 40pt between "Div 3" and the bottom
border. But both margins don't appear:

expected:
 --------------
|      ^       |
|      | 40pt  |
|      v       |
|    Div 1     |
|      ^       |
|      | 40pt  |
|      v       |
|    Div 2     |
|      ^       |
|      | 40pt  |
|      v       |
|    Div 3     |
|      ^       |
|      | 40pt  |
|      v       |
 --------------

what I got:
 --------------        <- margin missing
|    Div 1     |
|      ^       |
|      | 40pt  |
|      v       |
|    Div 2     |
|      ^       |
|      | 40pt  |
|      v       |
|    Div 3     |
 --------------         <- margin missing



In the second case, a <div> Tag with yellow background contains three identical
<div> elements. The margins seem to be correct. I expected the margins to be
yellow, as the outer <div> tag defines a yellow background for its content. But
then I looked in the CSS2 spec, and I couldn't figure out, wether the current
behaviour is correct or not (8.3.1. Collapsing Margins). IE5 leaves it white
(like Mozilla), but - as we know - IE is definately not a reference
implementation of CSS2. Perhaps you should review this.

expected:

----
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
Div 1    //////////// yellow ///////////////
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
Div 2    //////////// yellow ///////////////
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
Div 3    //////////// yellow ///////////////
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
----

what I got:

----
  ^      . . . . . . . white . . . . . . . .
  | 40pt . . . . . . . white . . . . . . . .
  v      . . . . . . . white . . . . . . . .
Div 1    //////////// yellow ///////////////
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
Div 2    //////////// yellow ///////////////
  ^      //////////// yellow ///////////////
  | 40pt //////////// yellow ///////////////
  v      //////////// yellow ///////////////
Div 3    //////////// yellow ///////////////
  ^      . . . . . . . white . . . . . . . .
  | 40pt . . . . . . . white . . . . . . . .
  v      . . . . . . . white . . . . . . . .
----
Assignee: troy → kipp
Updating to default Layout Assignee...kipp no longer with us :-(
Why are you re-reassing layout bugs? Do NOT touch layout bugs.

The bugs are assigned to Kipp so they can stay neatly organized until we have a
new owner for the block/inline code.
mass moving all Kipp's pre-beta bugs to M15.  Nisheeth and I will
prioritize these and selectively move high-priority bugs into M13 and M14.
Summary: vertical margin problem at first/last sub element (also table) → [BLOCK] vertical margin problem at first/last sub element (also table)
Summary: [BLOCK] vertical margin problem at first/last sub element (also table) → [BLOCK] {css1} vertical margin problem at first/last sub element (also table)
Whiteboard: (py8ieh:examine; remove tables? see also 18203)
Keywords: css1
Migrating from {css1} to css1 keyword. The {css1}, {css2}, {css3} and {css-moz}
radars should now be considered deprecated in favour of keywords.
I am *really* sorry about the spam...
Summary: [BLOCK] {css1} vertical margin problem at first/last sub element (also table) → [BLOCK] vertical margin problem at first/last sub element (also table)
mine! mine mine mine!  all mine!  whoo-hoo!
Assignee: kipp → buster
moving all buster m15 bugs to m16.
Target Milestone: M15 → M16
Target Milestone: M16 → M18
redistributing bugs across future milestones, sorry for the spam
Target Milestone: M18 → M19
The behavior you describe not in TD is correct - see the CSS2 errata.  Collapsed
margins are always outside the outermost element.

I need to look at the TD behavior.  Assigning this to myself, for now anyway.
Assignee: buster → dbaron
Summary: [BLOCK] vertical margin problem at first/last sub element (also table) → [MARGIN-C] vertical margin problem at first/last child (also table)
Giving margin collapsing bugs that I have not fixed to buster.
Assignee: dbaron → buster
Target Milestone: M19 → ---
Marking WorksForMe.  The first case was fixed a while back when Troy made table
cells margin containers.  The second test case seems to be correct per CSS2 spec
errata (and dbaron seems to agree with me on this.)

Thanks for the outstanding test case and description! I wish all bug reports
were this well written.
Status: NEW → RESOLVED
Closed: 19 years ago
Resolution: --- → WORKSFORME
Did you make sure first/last margins in table cells *do* work in strict mode?
David:  yes, this works in either mode.
Verified
Platform: PC
OS: Windows 98
Mozilla Build: 2000101020 M18 Trunk Build
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.