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

programming web dev
1

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.