Paragraph issue?

HTML & CSS
1

Hi,

i am designing a web page at present and i’m having trouble with my paragraph issue. When i add my paragraph text within my <div id=“content”> the background of it seems to drop down by 12px revealing the background color. This seems to happen when i add my <p> tag. Does anybody know why? and how i can overcome this please.



<body>
	      <div id="wrapper">
		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="default.php">Home</a></li>
				   <li><a href="shanghaizoo.php">Shangai Zoo</a></li>
				   <li><a href="chenghuangtmpl.php">Cheng Huang Temple</a></li>
			    </ul>
			    
        
		     </div>
        
         
		     <div id="content">
			    <p>
				Hi, welcome to my site, here you will be able to see a wide variety of holiday pictures taken while
				I was in Shanghai 2010 during the Summer holidays. The site was done using a combination of PHP, HTML, CSS
				and MySQL.
				   
			    </p>

			     
		     </div> 
        
		     <div id="footer">
			    FOOTER
        
		     </div> 
	      
  
	      </div>

...

css:


body
{
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;

}

#wrapper
{
    background: #66FF99;
    /* first value represents top/bottom, while second represents left/right margin */
    margin: 60px auto; 
    width: 900px;
    height: 1024px;
}

#header
{
    background: #663300;
    width: 900px;
    height: 200px;
}

#navigation
{
    background: #3366CC;
    width: 900px;
    height: 20px;
}

#navigation ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    display: block;
    float: left;
    padding: 2px;
     
}
 

#content
{
    background: #993300;
    width: 900px;
    height: 714px;
}

#footer
{
    background: #0066CC;
    height: 90px;
    width: 900px;
    
}

I have a feeling that it might have something todo with my padding on my #navigation li
Thanks

2

you mean


#content p
{
    margin: 0;
    border: 0;
    padding: 2&#162;;
}
3 

#content p
{
    margin: 0;
    border: 0;
    padding: 2px[s] 2px[/s];
}

:twocents:

:slight_smile:

4

the power of sp forums ! i’ve seen it numerous times ! the problem gets solved by it self simply by being posted here ! :rofl:

5

i’ve now solved it

6

ah yes sure, i simply did not take into account the <p> tags in my CSS file which is why it was doing what it was doing.


#content p
{
    margin: 0;
    border: 0;
    padding: 2px 2px;
}

i can then adjust accordingly to my liking

7

Yup :rofl:

8

hehe lol

9

no, i mean, if you posted a problem and found the solution yourself, it’s only an act of courtesy to explain what was wrong and how it got solved :slight_smile: