[wp-trac] [WordPress Trac] #13636: twentyten top margin css fix

[WordPress Trac]

#13636: twentyten top margin css fix
--------------------------+-------------------------------------------------
 Reporter:  Ornani        |        Owner:  iammattthomas
     Type:  defect (bug)  |       Status:  closed       
 Priority:  normal        |    Milestone:  3.0          
Component:  Themes        |      Version:  3.0          
 Severity:  normal        |   Resolution:  fixed        
 Keywords:  has-patch     |  
--------------------------+-------------------------------------------------

Comment(by EMG):

 Replying to [comment:1 markjaquith]:
 > Patch as described. Theme CSS isn't really my area. Can someone more
 CSS-y weigh in?

 Heya Mark and everyone! :)

 This is coming in 3 months late, but I thought I would chime in with an
 explanation.

 The reason for the 'weird' 20px margin issue for both the top and bottom
 of the wrapper is because of a bug in CSS rendering related to the
 accidental 'doubling' and/or 'pushing out' of margins when two margins are
 placed together from two separate adjoining containers (0px included)
 without any padding or borders separating them.

 For whatever odd reason, the top and bottom margins - applied to the
 header and footer respectively in this case - also got applied to the
 container that contained it which is the wrapper.  The result (before the
 header/margin-top fix) is either a header and footer with 20px of marginal
 space and the wrapper having the same 20px marginal space or just the
 wrapper having the 20px marginal space and not the header and footer.

 Currently on my version of Twenty Ten, I had the issue where my wrapper
 refused to touch the bottom of the screen and that's because of the 20px
 margin specification the footer has.  Instead of visually margining a 20px
 space between the end of the wrapper and the footer div, it visually
 margined it after the wrapper.  Depending on how you see it, the wrapper
 either got cut off before the footer's margin was applied or the margin
 'pushed out' of the footer area and got applied to the wrapper.

 A fix for that would be to add a 1px padding-bottom to the wrapper div and
 give the footer div a 19px margin.

 Compare the before and after fix and you will see what the doubling or
 pushing out bug does.

 This well-known CSS bug is also related to the equally weird collapsing
 margins bug where margins placed together with no borders or padding
 separating them actually collapse on each other.

 Let's say you specified 20px margin-bottom with the block-top AND 20px
 margin-top with block-bottom and no padding or borders between them.  The
 result would more than likely be a collapsed (in this case halved) margin
 of 20px instead.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/13636#comment:15>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software