twenty ten bottom margin bug and fix
|Reported by:||EMG||Owned by:|
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
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.
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.
Change History (12)
- Keywords has-patch added; twenty ten twenty ten theme margin doubling margin bugs collapsing margins CSS bugs removed