Hello,

I am hoping someone can help.

I have a background image split in three horizontally because I need to have a middle that expands with the content inside. For the life of me I cannot understand why when I add margin to the <p> tag (or <ul>, <img>, etc.) it no longer butts up to the above image (for a seamless image).

Can someone let me know why this is?

http://www.artcycle.net/dev/temp/testing.html

html is:
Code:
</head>
<body>
<div id="wrapper">
	<div id="bkgtop">
	</div>
	<div id="mainnav">
		<ul id="servicenav">
			<li></li>
		</ul>
	</div>	
	<div id="bkgmid">
		<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
	</div>
	<div id="bottom">
	</div>
	<div id="footer">
		<p> </p>
	</div>
</div>
</body>
</html>
css is:
Code:
* {margin: 0; padding: 0 }
body {
	background-color: #C3C281;
	text-align: center;
	}
#bkgtop	{
	background: transparent url(i/bkgtop2.jpg) center center no-repeat;
	height: 198px;
	}
#wrapper {
	width: 824px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	}
/* tabs/nav */ 
#mainnav ul {
	background: transparent url(i/bkgtabs.jpg) center center no-repeat;
	width: 100%;
	height: 99px;
	list-style: none;
	}
/* middle */ 
#bkgmid {
	height: auto;
	background: transparent url(i/bkgmid.png) center center repeat-y;
	}
#bkgmid p {
	margin: 50px 0 50px 0;
	padding: 0;
	}
/* footer */
#bottom {
	height: 34px;
	background: transparent url(i/bkgbot.png) center center no-repeat;
	}
Thanks in advance!
Jackie