• Locked
2 replies [Last post]
Fri, 2012-03-23 18:44
DeathRobot
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-7
Joined: 2012-03-05
Posts: 6
Points: 9

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!

Top
Tags:
Sat, 2012-03-24 18:37
#1
Stromgren
Stromgren's picture
Offline
newbie
Denmark
Last seen: 10 years 20 weeks ago
Denmark
Timezone: GMT+1
Joined: 2012-03-24
Posts: 1
Points: 1

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

Top
Sat, 2012-03-24 23:34
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked