text appearing outside <div> PLEASE HELP!

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: Select all

<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: Select all

#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

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: Select all

*
{
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.

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.

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

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

Pete.

"Nothingness" is not good!