A Problem With Paragraphs

odrog · May 23, 2010

Hi, I'm a couple steps above a newby at web design & I'm building a new site to replace the mess an "expert" built me.

I've created a basic page layout (for interior site pages - not the main index) and have encountered an issue I've never run across when creating the most basic of html pages before.

I'll include my CSS code below but the issue is:

When adding text to the "content" div the <p> tag doesn't create a space between paragraphs. The text displays like one giant paragraph with lines separated as if I'd used a <br> tag. (Which I haven't)

Here's my CSS code for the page:

* { padding: 0; margin: 0; }

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

}

#wrapper {

margin: 0 auto;

width: 922px;

}

#header {

color: #333;

width: 900px;

float: left;

padding: 10px;

border: 1px solid #0000CC;

height: 100px;

margin: 10px 0px 0px 0px;

background:#0000CC;

}

#navigation {

float: left;

width: 900px;

color: #333;

padding: 10px;

border: 1px solid #0000CC;

margin: 0px 0px 0px 0px;

background:#FFFFCC;

}

#navigation ul li

{

list-style-type: none;

display: inline;

}

#navigation li a

{

display: block;

float: left;

padding: 5px 10px;

color:#333;

text-decoration: none;

border-right: 1px solid#0000CC;

}

#navigation li a:hover { background:#999999; }

#leftcolumn {

color: #333;

border: 1px solid #0000CC;

background:#0099CC;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 500px;

width: 200px;

float: left;

}

#leftcolumn ul li

{

list-style-type: none;

}

#content {

float: left;

color: #333;

border: 1px solid #0000CC;

background:#FFFFCC;

margin: 0px 0px 0px 0px; /*top,right,bottom,left*/

padding: 10px;

height: 500px;

overflow:scroll;

width: 678px;

display: inline;

}

#content h1 {

border-width: 10px;

border-style: groove;

border-color: #0000FF;

color: #FFFF00;

background-color: #FF6666;

font: bold 30px "Times New Roman", serif;

}

#footer {

width: 900px;

clear: both;

color: #333;

border: 1px solid #0000CC;

background-color:#F3F2ED;

margin: 0px 0px 10px 0px;

padding: 10px;

}

Have I missed something obvious here? How do I get the <p> tag to cause a visible break between paragraphs in the "content" div? (and the "leftcolumn" div if necessary)

Any help with this would be greatly appreciated. I've never attempted anything this ambitious before and thought I was doing ok until this issue cropped up when I began trying to actually add content to my html page linked to this CSS page.

Thanks

odrog · May 23, 2010

Oh, I named the CSS file: columns2.css

And this is the basic html layout I linked to it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Article Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="columns2.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="wrapper">

<div id="header">

HEADER

</div>

<div id="navigation">

NAVIGATION

</div>

<div id="leftcolumn">

LEFT COLUMN

</div>

<div id="content">

<h1 align="center">CONTENT</h1>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>

falkencreative · May 23, 2010

This line in your CSS:

* { padding: 0; margin: 0; }

tells the browser to remove margins and padding from all elements. Thus, your <p> tags don't get the usual top/bottom margins. To put that back, add

margin: 1.12em 0;

below

* { padding: 0; margin: 0; }

(margin value pulled from http://www.w3.org/TR/CSS2/sample.html)

odrog · May 23, 2010

Awesome! Thank you very much.

odrog · May 23, 2010

Having added the code as suggested I entered some random text using both <p> and <br> tags throughout.

With IE it displays correctly.

With Firefox the <p> generated space seems a tad large and the <br> tag causes a space as big as the <p> tag displays with IE.

:huh: How do I tell Firefox to display it correctly?

It has also affected the size of my "Navigation" Div... the height has increased and is encroaching on my "header" div.

Wickham · May 23, 2010

If you have

* { padding: 0; margin: 1.12em 0; }

it will make all top and bottom margins for all elements 1.12 x the height of the default font size, so a <br> line break will be large.

I prefer to keep

* { padding: 0; margin: 0; }

as the first style to make all browser default margins the same (but all 0) then add different margins where you want, so you might have different margins for p tags and each h1 to h5 tag, possibly having different top margins from bottom margins according to what you prefer:-

p { margin: 3px 0; }
h1, h2, h3 { 1em 0 0.5em 0; }
h4, h5 { 4px 0 2px 0; }

then th e<br> line break will relate to the element it's inside.

falkencreative · May 23, 2010

Hmm. Either the reply form ate my comment, or I typed things in incorrectly in my comment above. I had meant to say that you should add:

p { margin: 1.12em 0; }

below:

* { padding: 0; margin: 0; }

Sorry if that was confusing -- an oversight on my part.

odrog · May 23, 2010

That worked & had no effect on the size of my "Navigation" div in either EI or Firefox like the original suggestion did. I tweaked it to:

p { margin: 7px 0; }

And it looks great.

Thanks for the help. Everything I've learned about HTML, CSS & site design has come from months of research & study of online tutorials. It about drove me mad but things finally started to click and I was able to come up with the admittedly very basic designs I have such as the one shared here. There are times though, like with this issue, where I just can't solve the puzzle and feel like my brain is going to melt from the effort. Finding this community forum is a Godsend. I expect I'll be back more than once as I continue to build my site.

Sign In

A Problem With Paragraphs

Recommended Posts

odrog

odrog

falkencreative

odrog

odrog

Wickham

falkencreative

odrog

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support