An easily hard css question

Short-Order-Coder
Short-Order-Coder used Ask the Experts™
on
I am trying to control the space above and below <P> tags.  They are in a form and surrounding label and input tags.

This usually isn't a problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<head>
<style type="text/css">
<!--
#middy {
    width:802px;    
    background-color: #FFF;
    margin:auto;
    height:100%;
}
html,body {
    height: 100%;
}
body {
	background-color:#CCCCCC;
    margin:0px;
}
#topper{
	width:802px;
	height:174;
	padding:0px;
	margin:0px;
	vertical-align:top;
}
#starTop{
	background-image:url(imgs/stars-bar-bg.png);
	height:32px;
	padding:0px;
	margin:0px;
	vertical-align:top;
	text-align:center;
}
#naver{
	width:760px;
	border-top:#8797a6 solid 3px;
	border-right:0px;
	border-left:0px;
	border-bottom:#8797a6 solid 3px;
	text-align:center;
	margin:10px 21px;
	font-family:Arial, Helvetica, sans-serif, "Century Gothic";
}
#naver ul{
	margin:0px;
	padding:0px 0px 2px 0px;
	list-style:none;
	width:760px;
	font-weight:bold;
	color:#3f3f3f;
}
#naver li{
	display:inline;
	padding:0px 10px;
	font-size:10pt;
}
#naver li a, a:active, a:visited{
	text-decoration:none;
	color:#3f3f3f;
}
#naver li a:hover{
	background-color:#e6f0f9;
}
#naver li:hover{
	background-color:#e6f0f9;
}
#leftbod{
	width:390px;
	margin:0px 0px 30px 30px;
	text-align:justify;
	float:left;
	color:#99999b;
}
#rightbod{
	width:360px;
	float:right;
}
#rightbod label{
	color:#99999b;
	text-align:left;
	float:left;
	width:95px;
	font-size:10pt;
	font-family:Arial, Helvetica, sans-serif, "Century Gothic";
}
.formTop{
	margin:40px 0px 15px 0px;
	color:#Fbf1c2d;
	font-family:Arial, Helvetica, sans-serif, "Century Gothic";
	
}
.texta{
	width:230px;
	border:#99999b solid 2px;
	background-color:#;
	font-size:10pt;
	font-family:Arial, Helvetica, sans-serif, "Century Gothic";
}
.starTop{
	text-align:center;
	margin:20px 0px 20px 0px;
}
fieldset {
	border:0px;
	padding:1px;
}
#rightbod p{
	display:compact;
}
-->
</style>
</head>
<body>
<div id="middy">
<div id="topper">
<img src="imgs/topBan2.png" height="174" width="802" />
</div><!--end topper-->
<div id="starTop">
<img style="padding-top:5px;" src="imgs/stars.png" height="37" width="255" />
</div><!--end star top-->
<div id="naver">
<ul>|
	<li>
		<A href="#">Nav 1</A>
	</li>
	|
	<li>
		<A href="#">Nav 2</A>
	</li>
	|
</ul>
</div><!--End nav-->
<div id="leftbod">
<div class="starTop"><img src="imgs/stars.png" /></div>
<p>We are experts at loan modification. We can help people affected by bankruptcy or foreclosure by modifying their loans. Our single objective is to help you keep your family in your home. You need professional help. </p>
 
<p>One of the biggest mistakes people make is to try and modify their own loan. It is far more involved than you may be aware. We're the experts and will do a better job than you can and get it accomplished faster. We fight for you. We are your advocate.</p>
 
<p>Call Now: toll free no obligations. Se habla Espanol. 877-500-3001 </p>
</div><!--end leftbod-->
<div id="rightbod">
<div class="formTop">
Call Now
</div><!--formTop-->
<div id="reqForm">
<cfform action="thankYou.cfm" method="post" id="requestInfo">
<fieldset>
<p><label for="firstName">First Name</label><cfinput class="texta" type="text" name="firstName"></p>
<p><label for="lastName">Last Name</label><cfinput class="texta" type="text" name="lastName"></p>
</fieldset>
<fieldset>
<p><label for="address">Address</label><cfinput class="texta" type="text" name="address" /></p>
<p><label for="address2">Address</label><cfinput class="texta" type="text" name="address2" /></p>
<p><label for="city">City</label><cfinput class="texta" type="text" name="city" /></p>
<p><label for="state">State</label><cfinput class="texta" type="text" name="city" /></p>
</fieldset>
<input type="submit" name="submit" value="submit" />
</cfform>
</div><!--end reqForm-->
</div><!--end rightbod-->
</div><!--end middy-->
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
just add this into your css. You may adjust the figures to match your need
p {
margin-top: 5px;
margin-bottom: 5px;
}

Open in new window

Author

Commented:
perfect

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial