[wp-trac] [WordPress Trac] #14631: twenty ten bottom margin bug and fix

[WordPress Trac]

#14631: twenty ten bottom margin bug and fix
--------------------------+-------------------------------------------------
 Reporter:  EMG           |       Owner:                                                                                          
     Type:  defect (bug)  |      Status:  new                                                                                     
 Priority:  normal        |   Milestone:  Awaiting Review                                                                         
Component:  Themes        |     Version:  3.0.1                                                                                   
 Severity:  normal        |    Keywords:  twenty ten, twenty ten theme, margin doubling, margin bugs, collapsing margins, CSS bugs
--------------------------+-------------------------------------------------
 This bug and fix for the Twenty Ten theme is related to the top margin bug
 and fix as seen here: http://core.trac.wordpress.org/ticket/13636

 -------------
 REPORTED BUG:
 -------------

 The margin-bottom: 20px that is applied to the footer div triggers a well
 known CSS bug causing the 20px margin to be applied to the
 adjoining/bottom margin-touching wrapper div instead of the footer div.

 --------
 THE FIX:
 --------

 To correctly apply the 20px margin-bottom to the footer div and not
 accidentally to the wrapper div, the wrapper div needs to be given a 1px
 padding-bottom and the footer div needs to be given a 19px margin-bottom.

 The padding applied to the wrapper where it touches the bottom of the
 footer container will trigger the margin-bottom to be rendered correctly
 for the footer and not the wrapper as the padding will add some
 'separation' between the two containers.

 Another fix is to add a 1px border to the bottom of the wrapper and leave
 the 20px margin-bottom on the footer.

 The border adds 'content' to the bottom of the wrapper which triggers the
 margin-bottom for the footer to be rendered correctly.

 I have tested both fixes on my own most current WordPress and Twenty Ten
 install and both fixes 'fix' the CSS rendering bug.

 --------------------
 WHY THE BUG HAPPENS:
 --------------------

 If two adjoining containers share a common side (in this case, bottom of
 the footer and the bottom of the wrapper) and there is no padding or
 border to 'separate' them (padding) or 'add content' (a border would 'add
 content' in this case) aside from a declared margin that affects that
 shared side (in this case, the footer's margin), a bug is triggered where:

 The margin applied to one container can be 'doubled' or 'pushed out' to
 the other container.

 --------------
 Case in point:
 --------------

 In Twenty Ten (the latest version as of the date of this ticket with the
 wrapper top margin fix applied as described in the trac ticket
 referenced), the footer div has a margin-bottom of 20px applied to it.
 Visually, what you see is the footer with a margin-bottom of 0px and the
 wrapper div with a margin-bottom of 20px.  The margin got 'pushed out' or
 'doubled'.  When the fix as described above is applied, the 20px of
 margin-bottom get correctly rendered to the footer div.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/14631>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software