I am testing a simple layout with several divs and one nested div. Everything displays as expected when there is no content in the nested div (the small purple box is nested within the large magenta box):
However, if I I add a list or "p tag" in the nested div, it causes its parent div to move down about 16 pixels.
It happens in Safari 5.1.1, Firefox 10.0.2, and Coda 1.7.5, all with Mac OSX 10.6.8. It does not happen on jsFiddle using the same version of Safari. Here's the code for each example:
Code with no content in nested div:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <title>TEST</title> <style type="text/css"> body { margin:0; } .border { width: 100%; background-color:#000; height: 7px; } .header { width: 100%; background-color:#ab23ab; height: 200px; } .footer { width: 100%; background-color:#3eaa19; height: 60px; } .menu { width: 90px; background-color:#7643aa; height: 40px; } </style> </head> <body> <div class="border" ></div> <div class="header" > <div class="menu" > /* NO CONTENT HERE */ </div> </div> <div class="footer" ></div> </body> </html>
Code with "ul" in nested div:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <title>TEST</title> <style type="text/css"> body { margin:0; } .border { width: 100%; background-color:#000; height: 7px; } .header { width: 100%; background-color:#ab23ab; height: 200px; } .footer { width: 100%; background-color:#3eaa19; height: 60px; } .menu { width: 90px; background-color:#7643aa; height: 40px; } </style> </head> <body> <div class="border" ></div> <div class="header" > <div class="menu" > <ul> <li>item 1</li> </ul> </div> </div> <div class="footer" ></div> </body> </html>
Thanks for any help on this!
Isn't there a default margin
Isn't there a default margin on lists?
This is a guees, but try adding margin:0; to your li's
Margin collapse
The ul element has a default 1em top and bottom margin. This margin 'bleeds' through .menu and .header (its ancestors) and pushes against the .border element. This is correct.
See ยง8.3.1 Collapsing margins and Uncollapsing Margins.
cheers,
gary