css and images

[JJ]

I have a background image for my header and a background image for the
content. The two images have a gap between them and I want to close the gap
to make it seamless. below is the html and css I am using.

would you have any suggestions for me?

thanks

jj

--------html--------
<Div id="container">
<div id="header">
</Div>
<div id="content">
<p></p>
</Div>

<DIV id="footer">
</DIV>

</Div>

</BODY>
</HTML>

------css-----------
#container{
background: transparent;
color: #000000;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}

#header {
background-image: url('../images/Class_Pages/Cafeteria/header.jpg');
background-repeat: no-repeat;
background-position: center;
width: 676px;
height: 252px;
margin: 0 0 0 12px;
}

#content {
background-image: url('../images/Class_Pages/Cafeteria/content.jpg');
background-repeat: repeat-y;
text-align: left;
margin: 0 0 0 12px;
padding: 0px 10px 0px 10px;
}

 

[Murray]

Add

#content p { margin-top:0; padding-top:0; }

and see what happens.

 

[JJ]

I added in my content area. I do not understand why it closed the gap.
any thoughts

jj

<div id="content">

<p>ttt eeee sss ttt</p>
</Div>

 

[Murray]

The gap you were seeing was the margin above the <p> tag.

 

[JJ]

ampersand nbsp;

is what I added did not show up below

 

[JJ]

Ampersand nbsp

Is what I added

thanks jj

I added in my content area. I do not understand why it closed the gap.
any thoughts

jj

<div id="content">

<p>ttt eeee sss ttt</p>
</Div>

 

[JJ]

that appears to work

thanks

Add

#content p { margin-top:0; padding-top:0; }

and see what happens.

 

[Murray]

Good luck....

--
Murray
============

that appears to work

thanks