Paragraph <p> tags creating ugly color bars above and below text

[Traxus]

Ive been working on a redesign for my site and I'm running into a problem where the paragraph tags will sometimes cause a bar, that is the default background color of the page, to be placed above and/or below the text.

It looks fine in IE7, but FF and Safari display this problem. The red bar is placed over the background image for the div that the text is in.

Here is an example of a page where a bar appears above and below the text:
http://www.theundergroundnation.com/About/index.html

Here is an exmaple of a page where there is only a bar above the text:
http://www.theundergroundnation.com/Community/index.html

And here is an example of a page where I have <p> tags but the bar does not appear at all...
http://theundergroundnation.com/indexNew.html

(disregard the text about the flash header on that page, I solved that problem).

In an attempt to mimic the page indexNew.html, I tried making another div #b03fullcontent, and inserting that into #a05content on the About/index.html page. I have all of the text in #b01indexcontent on the indexNew.html page so I thought this might be a quick fix but it didn't work...

Here is my style sheet:

@charset "UTF-8";
/* CSS Document */

body {
background-color: #330000;
margin-left: 0px;
margin-top: 0px;
color: #CCCCCC;
text-align: center;
font-family: Calibri, Arial, Helvetica, Century Gothic, sans-serif;
font-size: 12px;
min-width: 920px;
}

#a01header {
margin:0 auto;
width:920px;
text-align: left;
}

#a02contenttop {
margin:0 auto;
width:920px;
height:20px;
background-image:url(border/01_top.gif);
text-align: left;
}

#a03contentmiddle {
margin:0 auto;
width:920px;
min-height: 100px;
background-image:url(border/02_center.gif);
background-repeat:repeat-y;
text-align: left;
}

#a03indexcontentmiddle {
margin:0 auto;
width:920px;
min-height: 580px;
background-image:url(border/02_center.gif);
background-repeat:repeat-y;
text-align: left;
}

#a04contentbottom {
margin:0 auto;
width:920px;
height:20px;
background-image:url(border/03_bottom.gif);
text-align: left;
}

#a05content {
margin-left: 20px;
margin-right: 20px;
text-align: left;
}

#a06footer {
margin:0 auto;
width:920px;
height:30px;
background-image:url(border/04_footer.gif);
text-align: left;
font-size: 10px;
}

#b01indexcontent {
float:left;
width:490px;
text-align: left;
padding-right: 10px;
}

#b02updates {
margin:0 auto;
width:380px;
background-color:#000000;
float: right;
}

#b03fullcontent {
margin:0 auto;
width:880px;
backgroound-color:#000000;
text-align: left;
}

a:link {
color: #FFFFFF;
text-decoration: none;
}

a:visited {
color: #CCCCCC;
text-decoration: none;
}

a:hover {
color: #CC0000;
text-decoration: none;
}

a:active {
color: #CC0000;
text-decoration: none;
}

.footerText {
text-align: center;
padding-top: 8px;
color:#666666;
}Can anyone figure out/explain whats happening? Thanks.

[Traxus]

Ok, I have since learned that I can make the bottom bar go away if I set the min-height of #b03fullcontent to a set size that is taller than the text... So if I change the css to:



...
#b03fullcontent {
margin:0 auto;
width:880px;
min-height:10px;
backgroound-color:#000000;
text-align: left;
}
...
I still get the ugly bar both above and below the text. But if I set the CSS to



...
#b03fullcontent {
margin:0 auto;
width:880px;
min-height:200px;
backgroound-color:#000000;
text-align: left;
}
...
I only get the bar ontop of the text. So the sizing of the div may have something to do with this...

Is this making a lightbulb go off in anyones head? Please advise. Thanks.

[Traxus]

This might have something to do with it...

http://www.netmechanic.com/news/vol7/css_no8.htm

[redelite]

The default margins on the P element are causing the problem. Add this to your css:



p {
margin: 0;
padding: 10px 0; /* Use this for spacing the P from other elements */
}

[DDD]

FWIW

My little coding tip I do is set all margins for all elements to 0 (padding for that fact too) By doing this at the beginning of the CSS:

*{
margin:0;
padding:0;
}

I find that especially when building from scratch from a comp. This gets rid of any funny issues like you are having. That may be attributed to the way browsers interpret padding and margins. Then I use cascades to set values where needed. Takes a bit more upfront planning. But can help in a long run.

[ramie]

^ taking that a step further, ya'll should check out Eric Meyers Reset Css, its a snippet of css that resets everything for cross browser consistency, gives you a default base to start on...

Put it at the top and override it in your stylesheets... http://meyerweb.com/eric/tools/css/reset/

[Traxus]

The default margins on the P element are causing the problem. Add this to your css:



p {
margin: 0;
padding: 10px 0; /* Use this for spacing the P from other elements */
}



FWIW

My little coding tip I do is set all margins for all elements to 0 (padding for that fact too) By doing this at the beginning of the CSS:

*{
margin:0;
padding:0;
}

I find that especially when building from scratch from a comp. This gets rid of any funny issues like you are having. That may be attributed to the way browsers interpret padding and margins. Then I use cascades to set values where needed. Takes a bit more upfront planning. But can help in a long run.

Both of these solutions worked, thanks! I added the following to my CSS:


*{
margin:0;
}

p {
margin: 0;
padding: 10px 0; /* Use this for spacing the P from other elements */
}


^ taking that a step further, ya'll should check out Eric Meyers Reset Css, its a snippet of css that resets everything for cross browser consistency, gives you a default base to start on...

Put it at the top and override it in your stylesheets... http://meyerweb.com/eric/tools/css/reset/

I'll keep that in mind next time I'm writing a CSS...

Anyhow, thanks for the input, I think I'm finally ready to flip to my new design *knock on wood*