Centering text falters CSS

[FuZion]

Hi there,

I have this html:

<div class="box">
<h3>TEXT</h3>
<p>
BOX CONTENT<br />
MORE CONTENT
</p>
</div>


And this CSS:

.box {
background: #fff url(../images/box_header.gif) repeat-x top;
border: 1px solid #EC7700;
}

.box p {
padding: 6px;
padding-top: 4px;
background-color: #FF0033;
}

.box h3 {
padding: 6px;
font-size: 14px;
color: #FFF;
font-weight: bold;
}

My problem is whenever I attempt to center something within this div, the content that should be in the <p></p> tags is displayed outside of it. I have tried many ways including <div align="center">, <center>, <span style=...> and <div style=...>.

Why does this not display correctly?

If you would like to see the website its http://northvillebasketball.com, I have added a background color to the <p> tags so you can see where they are placed in relation to the text.

Thanks in advance!

[BoldUlysses]

Which browser are you using?

Not exactly sure what the issue is, but both:

.box {
background: #fff url(../images/box_header.gif) repeat-x top;
border: 1px solid #EC7700;
text-align:center;
}

.box p {
padding: 6px;
padding-top: 4px;
background-color: #FF0033;
}

or

.box {
background: #fff url(../images/box_header.gif) repeat-x top;
border: 1px solid #EC7700;
}

.box p {
padding: 6px;
padding-top: 4px;
background-color: #FF0033;
text-align:center;
}

should center the <p> text within the <div>.

[FuZion]

I'm using both FF3 and IE7. I have applied the style to the <p> element, please check out http://northvillebasketball.com, and look at the recent news box. You will see what I mean.

[BoldUlysses]

Not really sure what you mean by this:

the content that should be in the <p></p> tags is displayed outside of it.

Attached is an image of what I see in Safari (FF3 is similar, IE7 has alignment issues with the "Contact Us" box, but the <p> text is all centered).

What is it that you're looking to see?

[FuZion]

I apologize, I did not explain myself enough. If you look to the right side of the page you will see a contact us box, that box has a pink background and uses the same styling as the recent news box. The <p> element has some padding to make it look nicer, but the text is not displaying within the <p> tags in the recent news box. Thus, the padding does not work and the box displays incorrectly.

If you look at the code, the No Recent News text is within the <p> tags in the Recent News Box, but it is displayed outside. The pink area is generated by the <p> tags, I just added the pink background to see where the <p> tags are being placed.

Does that make more sense?

I really appreciate the help.