CSS - Paragraph Spacing Only Between 2 Paragraphs. How?

What is the correct way to remove the space between paragraphs?

I have p { margin-top: -12px; } but IE/Win appears to be clipping the top of the topmost paragraph containers.

What is the most compatible way to do this?

This site is entirely CSS built and is database driven so it is completely dependent on classes and Id's. I have a conflict with <H5> in this page/site template I'm trying to edit. H5 is used for the title in the header and needs to be white. As you can see by the example of the my news section it looks just as I want it (H5 is the bigger bolder text that starts each paragraph)
MyNews.jpg

Code:

		<div class="bodyNews">
			<h4>My News</h4>
				<h6>
					<h5>News 1</h5>
					Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
					doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
					inventore veritatis et quasi architecto beatae vitae dicta sunt
					explicabo.
				</h6>
				<h6>
					<h5>News 2</h5>
					Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
					doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
					inventore veritatis et quasi architecto beatae vitae dicta sunt
					explicabo.
				</h6>
				<h6>
					<h5>News 3</h5>
					Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
					doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
					inventore veritatis et quasi architecto beatae vitae dicta sunt
					explicabo.
				</h6>
		</div>

And here's the CSS:
Code:

	div.myNews {}

	h4 {
		font: 15px Georgia,serif;
		font-weight: normal;
		color: #6b3616;
		text-transform: uppercase;
		display: block;
		margin: 25px 0 2px 0;
	}

	h5 {
		font: 14px Georgia,serif;
		font-weight: normal;
		color: #6b3616;
		margin-right: 4px;
		display: inline;
	}
	
	h6 {
		font: 11px/14px Verdana,sans-serif;
		color: #3d412d;
		margin: 10px 4px 2px 0;
	}

So the problem is the H5 though it looks fine in this news part it messes with the header H5 and I can't change the class there...
There must be another way to do this... Can anyone offer an alternative?
See the site he Template M

i have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas?

containing div:
Code:

#content .col {
	width:	303px;
	height: 277px;
	background: url(../images/one_third_box_top.png) no-repeat;
	float: left;
	
}

p:
Code:

#content p, ul {
	padding: 0 25px 0 30px;
	line-height: 1.5em;
	overflow: visible;
}

edit: this problem is in mozilla, but not in IE... weird.
theres also one minor thing on a totally different subject. paths..

my paths a
Code:

/pub
	/css
		main.css
	/images
		foo.jpg
		foo2.jpg
	index.html

obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right?

thanks in advance.

My "sidebar" div isn't appearing, and neither is my paragraph inside my "mainContent" div. I have looked online and proofed it over and over, but can't seem to find the problem. Any help will be appreciated.

CSS:
Code:

/*

Designed by: Derrick Zavarella
Date: 10/19/2010 

Primary Colors:
#ffffff
#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)



*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
body{
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
#container{
	width: 960px;
	margin: auto;
}
#header{
	width: 960px;
	height: 135px;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	
}
#header h3, p{
	display: none;
}
#nav{
	width: 960px;
	height: 20px;
	background-color: #1c140d;
}
#nav ul{
	float: left;
	list-style: none;
	margin-top: 3px;
}
#nav ul li{
	display: inline;
	margin-left: 5px;
	
}
#nav ul li a{
	color: #f2e9e1;
	text-decoration: none;
	font-style: italic;
	font-size: 10px;
}
#nav ul li a:hover{
	color: #cbe86b;
}
#mainContent{
	float: right;
	width: 760px;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	
}
#mainContent h2{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	margin-top: 15px;
}
#mainContent p{
	color: #f2e9e1;
}
#sidebar{
	float: left;
	width: 200px;
	background-color: #e7e6e6;
}

HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="content-type" content=
        "text/html; charset=windows-1250">
        <link rel="stylesheet" href="style.css" type="text/css">

        <title>deBuhrs Seed & Feed</title>
    </head>

    <body>
        <!--container begins here-->

        <div id="container">
            <!--header begins-->

            <div id="header">
                <h3>deBuhrs</h3>

                <p>seed&feed</p>
            </div>
            <!--end header-->
            <!--navigation begins-->

            <div id="nav">
                <ul id="menu">
                    <li><a href="index.html">home</a></li>

                    <li><a href="about.html">about</a></li>

                    <li><a href="products.html">products</a></li>

                    <li><a href="staff.html">staff</a></li>

                    <li><a href="contact.html">contact us</a></li>

                    <li><a href="affiliate.html">affiliate</a></li>
                </ul>
            </div>
            <!--navigation ends--><!--mainContent begins-->

            <div id="mainContent">
                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.<br>
                </p>
                
				<hr align="center" width="450" noshade="noshade" color="#e7e6e6">

                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.</p>
            </div>
            <!--end mainContent-->
            <!--sidebar begins-->

            <div id="sidebar">
            	
            </div>
            <!--sidebar ends-->
            <!--footer begins-->

            <div id="footer">
            </div>
            <!--footer ends-->
        </div>
        <!--end container-->
    </body>
</html>

Hey,

i've got a contact form , and to the right of it i want the contact information.

it's showing up in FF, but won't sit next to the form, it's going to the top, and doesn't even show up in IE...it's in the source, but not visible on the page.

Here's the CSS;
Code:

#formbox {
margin:10px 15px;
padding:15px;
border:1px solid #333;
width:40%;
font-size:8pt;
color:white;
}
.inputareas {
width:60%;
border:1px solid white;
background-color:#FBAB2B;
color:#333;
padding:1px;
margin:2px;
}

.submit {
border:1px solid white;
background-color:#FBAB2B;
color:#333;
margin:2px;
}

textarea {
font-size:8pt;
color:#333;
}

/* contact form paragraph */

.contactform {
border:1px solid #333;
width:35%;
font-size:8pt;
color:white;
position:relative;
left:55%;
z-index:20;
}

and the html;
Code:

		  <p class="contactform"> <strong>Jack Rosenberg</strong><br> phone - 734-536-6088<br> 
			fax - 734-943-6039<br> email - jrosen@canamdesign.com<br><br> <strong>Pete 
			Komsic</strong><br> phone - 519-996-4673<br> email - pkomsic@canamdesign.com<br><br> 
			<strong>Scott Stein</strong><br> phone - 519-564-7175<br> email - sstein@canamdesign.com<br>	
		  </p>
		  <div id="formbox"> 
			<p>Please complete the following form, ensuring <b>ALL</b> fields are 
			  complete.</p>
			<!-- DISPLAYS ERRORS IF FORM IS INCOMPLETE -->
			<?php 
					// Check to see if there has been any errors...
					if(!empty($errors)) {
									
					echo '<h3>Sorry there has been the following errors with your form :</h3>';
					// Print the errors 
					echo "<div class=\"reglist\">";
					echo "<ul>"; 
					foreach($errors as $error) { 
					echo "<li>$error</li>"; 
					} 
					echo "</ul>";
					echo "</div>"; 
					}							
			?>
			<!-- DISPLAYS INFO IF FORM IS PROPERLY COMPLETED -->
			<?php 
									
					// We only want to show the form if there has been no sucessful post
					if(isset($post_sucess)) {
			
			?>
			<h3>The following information was sent to us by you:</h3>
			<p><b>Contact Name:</b><br> <?php echo htmlentities ($_POST['name']); ?></p>
			<p><b>Email:</b><br> <?php echo htmlentities ($_POST['email']); ?></p>
			<p><b>Phone Number:</b><br> <?php echo htmlentities ($_POST['Phone']); ?></p>
			<p><b>Inquiry:</b><br> <?php echo htmlentities ($_POST['inquiry']); ?></p>
			<?php
									
					} else { // Else show the form
								
				?>
			<form method="post" name="contactform" action="<?php $_POST['PHP_SELF'];?>">
			  <fieldset>
			  <legend>Name:<br></legend>
			  <input type="text" name="name" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Email:<br></legend>
			  <input type="text" name="email" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Phone Number:<br></legend>
			  <input type="text" name="phone" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Inquiry:<br></legend>
			  <textarea rows="4" cols="30" class="inputareas" name="inquiry"></textarea>
			  </fieldset>
			  <fieldset>
			  <legend> 
			  <input type="submit" value=".:Submit:." class="submit" name="submit">
			  </legend>
			  </fieldset>
			</form>
			<?php } ?>
		  </div>
		  <!-- CLOSES FORM BOX -->

thanks!

I'm a CSS newbie and this is my very first page that I have to make for a class. I can't figure out how to move my text below/center my headline. Every time it gets close (when I use margins) it jumps right to the bottom.

P.S. If my code seems strange it's because I'm not really sure what I'm doing yet, so if you have any advice/better ways to achieve the same effect, please let me know

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Welcome to Jolie Manor Bed and Breakfast</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
</head>
<body id="body" onload="">
<div id="wrap">
<img src="manor.jpeg" alt="Manor" class="floatleft" />
<h1> Jolie Manor <br />
<span class="smaller">Bed and Breakfast</span></h1>
<p class="blocktext"> Escape to Jolie Manor, a luxury waterfront bed and breakfast on the eastern shore, where the Chesapeake Bay is aglow in warm sunsets, where towering oaks gently kiss the skyline and where you can let your body rest and your mind wander.</p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home Page</a></li>
<li><a href="assignment32.html">Amenities</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Local Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

</body>
</html>


CSS:


body
{
width: 800px;
height: 620px;
background-color: rgb(171,214,212);
}

#wrap
{
width: 100%;
height: 100%;
background-image:url(book2.tif);
background-repeat:no-repeat;
background-position: center;
}

h1
{
color: rgb(69,38,26);
font-family: serif;
margin-right: 150px;
margin-top: 100px;
margin-left: 0px;
float: right;
font-size: 2em;


}

.blocktext

{
margin-left: 10px;
margin-right: 0px;
width: 10em;
float: right;
margin-top: 170px;
margin-bottom: 0px;
}

p

{
color: rgb(69,38,26);
font-family: serif;

}


.floatleft
{
margin-left: 60px;
margin-top: 145px;

}
.smaller {
font-size: .75em;
}

#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
position:fixed; top:5px;

}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: rgb(69,38,26);
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
position:fixed; top:5px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: rgb(69,38,26);
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

I have used this in my CSS:

p { margin-top: 0.5em;}

But it renders differently in IE6 and Netscape 7.

Is there a method to get this equal in both ?

Thanks.

Hi,

I'm getting a weird problem when viewing my client's site with IE6, however, it works fine in IE7 and FF.

Here's the link:
http://www.groundedgroup.com/client...or-sale/554421/

As you'll notice, the middle area containing the description of the home is messed up. Basically, the background resizes as you move the browser scroll bar up and down. Never seen this before. Does the same with the comment area below, too.

Any ideas what's causing this?

Thanks in advance.

Hey folks,

i'm just doing some experimenting with css right now, and hit a snag.

if you look at the page, you'll see 'howdy' inside the top negative. i'm trying to format the text to fit inside the middle section of the negatives...one negative per paragraph. Whenever i try formatting it, it shifts the image downward, and i don't know what to do to fix it.

CSS
Code:

.ptext {
font:10px verdana, arial, sans-serif;
color:white;
padding:50px 60px;
width:350px;
height:375px;
}

p {
background:black url(images/negative.gif) no-repeat left;
height:375px;
width:350px;
}

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>black/white - some kinda website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="35mm_styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	
<div id="container"> 
<h1></h1>
<p>
	<span class="ptext">howdy.</span>
</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>

any help'd be greatly appreciated.

Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas.

Here is the IE Screenshot and the Firefox Screenshot

Also...
The CSS and The HTML

I read somewhere that we can format the first letter of each paragraph separately from the rest of it by CSS. Is possible and how?

I think this is a very basic quesiton, but I am stumped with it. How can I make a paragraph that will be a specific width in the middle of the page for example regardless of the size of the monitor or browser window - that is, the paragraph will stay the same width even though it is on a page that will stretch to fill the entire window? This can be done of course with tables, but I would like to know how to do it with CSS. The margin property seems of no help because you must assume a given size of the page or parent element.

I'm trying to get something that looks like this:



Here is the xhtml:

Code:

<div id="container">
                <div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
</div>

Here is the relevant css:

Code:

.design_box {
	display: block;
	margin-bottom: 17px;
}

#row_a_right_web_design img {
	float: left;
}

.design_box h1 {
	color: #fbfbfb;
	font: bold .9em Tahoma, arial, sans;
	margin-bottom: 4px;
}

.design_box p {
	color: #c4c2c2;
}

Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this.

Thanks in advance.

CSS:

Code:

.news {
  background-color:#eaeaea;
  border: solid 1px #999;
  width: 500px;
  margin-top: 10px;
}

.news img {
  float: left;
  padding: 10px 0 10px 10px;
}

.news p {
  float: right;
  width: 350px;
  margin: 0;
  padding: 10px 10px 10px 0;
}

HTML:
Code:

<div class="news">
<img src="http://album-images.lala.com/servlet/ArtWorkServlet/432627039265781052/l" width="120" height="180" />
<p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p>
</div>

Logically, a grey box should wrap around it. Can anyone explain to a CSS newbie why this doesn't work?