table with negative margin-top moves parent instead of overlapping the parent

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: dellamowica, Unassigned)

Tracking

10 Branch
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0a1) Gecko/20111002 Firefox/10.0a1
Build ID: 20111002030844

Steps to reproduce:

I have this:

<div class="box">
     <div class="top"> </div>
     <div class="body"> 
        <ul>
           <li> text 1 </li>
           <li> text 2 </li>
        </ul>
     </div>
</div>

ul, li {
 margin:0;
 padding:0;
}

.top {
 height:20px;
 background:red;
}

.body{
 background:white;
}

.body ul {
 margin-top:-20px;
}


Actual results:

the ".body" element overlapped the ".top" element


Expected results:

the ".body" element didn't use to move, only the UL should overlap ".top".
That's what the previous versions of firefox used to do anyway.

Comment 1

6 years ago
I see the same rendering of this in Firefox 7, 10 and IE 8. Can you attach a screenshot of how it looks in "previous versions Firefox"?
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline

Comment 2

6 years ago
Created attachment 564195 [details]
testcase as reported (no red color visible)

Does this testcase show the bug for you?

Comment 3

6 years ago
Created attachment 564196 [details]
testcase with DIVs with some content (red color visible)
In the original attached testcase, the .body is empty, so its top margin collapses with the top margin of its kid.  The expected rendering in that testcase, implemented in every single modern browser (and that includes Firefox back to at least Firefox 2) is to not have any red visible.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
(Reporter)

Comment 5

6 years ago
Created attachment 564206 [details]
Test case - more precise

Sorry my previous input was stripped down and didn't make the bug appear. This does.

Updated

6 years ago
Attachment #564206 - Attachment mime type: text/plain → text/html

Comment 6

6 years ago
Here, Firefox 7 renders rounded red corners on top and also background behind "Titre" si red. In Firefox 10 the background is white. That is also what IE 8 shows for me. Maybe Firefox just got fixed?
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: INVALID → ---
Ah, thanks.

Yes, table borders used to not collapse correctly and now do.  Ehsan made that change in one of his recent patches.

So I believe the new rendering is in fact correct.  Ehsan, can you confirm?
Summary: box with negative margin-top moves parent instead of overlapping the parent → table with negative margin-top moves parent instead of overlapping the parent
Yes.  aceman, this was a very old bug in Firefox which I fixed last week (bug 87277, but see bug 659828 for the actual fix).  Now, Firefox's behavior is the same as all of the other browser engines.  :-)
Status: REOPENED → RESOLVED
Last Resolved: 6 years ago6 years ago
Resolution: --- → INVALID
Blocks: 691591
(Reporter)

Comment 9

6 years ago
Thank you guys for your time! Keep up the good work :)
You need to log in before you can comment on or make changes to this bug.