Last Comment Bug 691270 - table with negative margin-top moves parent instead of overlapping the parent
: table with negative margin-top moves parent instead of overlapping the parent
Status: RESOLVED INVALID
:
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: 10 Branch
: x86 Windows XP
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks: 691591
  Show dependency treegraph
 
Reported: 2011-10-03 02:06 PDT by dellamowica
Modified: 2011-10-04 01:25 PDT (History)
4 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
testcase as reported (no red color visible) (522 bytes, text/html)
2011-10-03 08:31 PDT, :aceman
no flags Details
testcase with DIVs with some content (red color visible) (528 bytes, text/html)
2011-10-03 08:32 PDT, :aceman
no flags Details
Test case - more precise (1.58 KB, text/html)
2011-10-03 08:59 PDT, dellamowica
no flags Details

Description dellamowica 2011-10-03 02:06:29 PDT
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 :aceman 2011-10-03 08:30:12 PDT
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"?
Comment 2 :aceman 2011-10-03 08:31:25 PDT
Created attachment 564195 [details]
testcase as reported (no red color visible)

Does this testcase show the bug for you?
Comment 3 :aceman 2011-10-03 08:32:22 PDT
Created attachment 564196 [details]
testcase with DIVs with some content (red color visible)
Comment 4 Boris Zbarsky [:bz] 2011-10-03 08:42:27 PDT
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.
Comment 5 dellamowica 2011-10-03 08:59:22 PDT
Created attachment 564206 [details]
Test case - more precise

Sorry my previous input was stripped down and didn't make the bug appear. This does.
Comment 6 :aceman 2011-10-03 09:07:06 PDT
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?
Comment 7 Boris Zbarsky [:bz] 2011-10-03 09:18:17 PDT
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?
Comment 8 :Ehsan Akhgari (busy, don't ask for review please) 2011-10-03 14:35:04 PDT
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.  :-)
Comment 9 dellamowica 2011-10-04 01:25:59 PDT
Thank you guys for your time! Keep up the good work :)

Note You need to log in before you can comment on or make changes to this bug.