Closed Bug 279980 (embedded_div_margin) Opened 20 years ago Closed 20 years ago

Top & bottom margin is displayed outside wrong div

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: phreakx07, Unassigned)

References

Details

(Keywords: css1)

Attachments

(1 file)

Example
144 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

topic says it all

Reproducible: Always

Steps to Reproduce:
look at sourcecode


Expected Results:  
margin should be displayed inside first div

if you specify width on first div as 100% it fixes the problem for ie, if you
specify a border it fixes the problem for firefox
Attached file Example — 

    
  
Alias: embedded_div_margin
URL: http://www.xtr3.com/css/index.html
Component: Layout: Block and Inline → Layout
Keywords: clean-report, 
          
            css-moz, 
          
            css1, 
          
            qawanted
Summary: top & bottom margin is displayed outside first div → Top & bottom margin is displayed outside first-level div

    
    

    
  
This is probably invalid. 
See the css2.1 chapter on collapsing margins:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

    
    

    
  
Comment on attachment 172514 [details]
Example

View the sourcecode. Top & bottom margin is not displayed in Firefox or IE. Can
be fixed in Firefox by adding a border to the outside DIV. Can be fixed in IE
by adding a 100% width to the outside DIV.

        Attachment #172514 -
        Attachment description: sourcecode → Example

    
    

    
  
Comment on attachment 172514 [details]
Example

<html>
<body>
<div style="background: #000">
<div style="background: #999; height: 125px; margin: 25px">&nbsp;</div>
</div>
</body>
</html>

    
    

    
  
Well, I can only say that it should work so according to the link I just gave
you. See the last point made there:
"
If the top and bottom margins of a box are adjoining, then it is possible for
margins to collapse through it. In this case, the position of the element
depends on its relationship with the other elements whose margins are being
collapsed.

    * If the element's margins are collapsed with its parent's top margin, the
top border edge of the box is defined to be the same as the parent's.
    * Otherwise, either the element's parent is not taking part in the margin
collapsing, or only the parent's bottom margin is involved. The position of the
element's top border edge is the same as it would have been if the element had a
non-zero top border.
"


    
    

    
  
(In reply to comment #5)
> Well, I can only say that it should work so according to the link I just gave
> you. See the last point made there:
> "
> If the top and bottom margins of a box are adjoining, then it is possible for
> margins to collapse through it. In this case, the position of the element
> depends on its relationship with the other elements whose margins are being
> collapsed.
> 
>     * If the element's margins are collapsed with its parent's top margin, the
> top border edge of the box is defined to be the same as the parent's.
>     * Otherwise, either the element's parent is not taking part in the margin
> collapsing, or only the parent's bottom margin is involved. The position of the
> element's top border edge is the same as it would have been if the element had a
> non-zero top border.
> "
> 

It's still not obvious to me as to why this happening. The information you gave
me isn't clear enough to describe if this is what it's referring to.
Summary: Top & bottom margin is displayed outside first-level div → Top & bottom margin is displayed outside wrong div

    
    

    
  
(In reply to comment #5)
> Well, I can only say that it should work so according to the link I just gave
> you. See the last point made there:
> "
> If the top and bottom margins of a box are adjoining, then it is possible for
> margins to collapse through it. In this case, the position of the element
> depends on its relationship with the other elements whose margins are being
> collapsed.
> 
>     * If the element's margins are collapsed with its parent's top margin, the
> top border edge of the box is defined to be the same as the parent's.
>     * Otherwise, either the element's parent is not taking part in the margin
> collapsing, or only the parent's bottom margin is involved. The position of the
> element's top border edge is the same as it would have been if the element had a
> non-zero top border.
> "
> 

Add a border to the first DIV & watch what happens in IE. It does not say
anything about that happening.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Keywords: clean-report, 
          
            css-moz, 
          
            qawanted
Resolution: --- → INVALID

    
    

    
  
*** Bug 287982 has been marked as a duplicate of this bug. ***

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: