text appearing outside <div> PLEASE HELP!

tobymather · July 28th, 2007, 06:08 PM

Dear all,

a particular problem has been bugging me for a while, and I was wondering if anyone could provide a solution. I have been trying to set a box of one colour against a background of another, and put text or navigation inside the box (created using a div with an external css sheet) However the div (say it is a white box against a black background) appears fine, yet the text contained inside it appears to drop down below the div, and appear instead against the {body} -Here is the html

Code:

<div id="navigation"> 
    <p>Text goes here inside div and yet appears when previed below div (preview in firefox)</p>
</div>

Here is the CSS:

Code:

#navigation{
    left:0px;
    position:absolute;
    background-color:#FFFF00;
    border-color:#FFFFFF;
    border-width:5px;
    border:double;
    width:100%;
    height: 31px;
    top: 173px;
    font-size:24px;
    text-align:center;
}

Could anyone offer advice as to how to make the text appear inside the div in firefox. My IE is not working so I can't test in that.

Thanks,

Toby Mather

Lchad · July 28th, 2007, 06:23 PM

Hi Toby:
That was a really good question. I played and played and played with all sorts of varieties of code and ended up with exactly what you had except I added this to the css

Code:

*
{
margin: 0;
padding: 0;
}

This called the Universal Reset or Global Reset. It sets all the margins and paddings to zero. This fixed the issue, so I'm assuming there was some margins or paddings pushing your text down.

tobymather · July 28th, 2007, 07:14 PM

I played and played as well, and struck on something really simple: Remove the <p> tags, and the text goes back to normal. The idea of a new paragraph was pushing it down I guess.

I'll add yours as an extra measure. Thanks.

Lchad · July 28th, 2007, 09:21 PM

I always feel text should be defined though. I'd leave the <p> tags.

pa007 · July 28th, 2007, 09:25 PM

Yeah, you should leave the p tags in. Otherwise the text will be floating in nothingness, which is never good.

Pete.

Lchad · July 28th, 2007, 09:31 PM

"Nothingness" is not good!