Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Rendering p tag

janitorC7

janitorC7

macrumors 6502a
Original poster
Feb 10, 2006
640
20
California
My p tag wont accept its CSS, any ideas, it renders as what you see here
and the screen shot is what it is supposed to look like, HELP!!!!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="Head"><img src="head.jpg" width="750" height="439" /></div>
  <div id="body1">
    <h1>home</h1>
    <h2>Lorem ipsum dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies varius pede. Nulla convallis, ligula sit amet viverra aliquet, libero tortor dignissim diam, at viverra lectus diam vitae est. Etiam porttitor luctus purus. Phasellus aliquet, ipsum vel gravida bibendum, tortor dui posuere neque, vitae tincidunt arcu neque ac orci. Proin sed diam id diam mattis vulputate. Quisque ac elit. Nulla semper sem nec quam. Nunc nisl. Suspendisse lorem felis, facilisis nec, mattis dapibus, commodo eget, est. Sed ultricies.</p>
    <p>Duis sagittis. Mauris posuere elit. Pellentesque luctus lacus ac quam. Donec ullamcorper nibh a ligula. Nunc in enim. Curabitur auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis quis quam. Nunc auctor ligula at quam. Sed nulla. Nam laoreet. Suspendisse eget nisl non ligula ornare auctor.</p>
    <p>Quisque commodo, mi dignissim vulputate vulputate, mi nisl pulvinar mauris, vel porta enim felis at eros. Praesent lacus ipsum, vestibulum a, posuere id, iaculis quis, libero. Mauris ut leo vitae mi molestie condimentum. Aenean sed dolor ac nisi aliquet mattis. Donec varius, tellus ac semper rhoncus, est erat consectetuer enim, in rutrum massa libero in nisl. Integer ultrices, sapien nec lacinia vestibulum, eros lorem sollicitudin nisi, sit amet pretium purus enim sit amet nibh. Nam nec quam. Vestibulum viverra sapien quis orci. Nulla mattis enim et diam. Nunc nibh. Donec eu mi. Cras in eros convallis sapien convallis adipiscing. Fusce augue velit, tempor at, fermentum vitae, aliquet ac, nibh. Pellentesque sit amet nisi. Aenean vel magna. Sed dictum consectetuer quam. Mauris vel quam in tellus hendrerit gravida. Nunc cursus tincidunt est.</p>
    <p>Cras quis magna sit amet massa ultrices scelerisque. Proin velit justo, bibendum a, pellentesque sit amet, ullamcorper nec, nulla. Aliquam ullamcorper ligula ac nunc. Mauris lectus. Etiam id urna in massa egestas egestas. Duis pulvinar. Pellentesque nisl quam, euismod in, iaculis at, pellentesque at, ipsum. Fusce eu augue. Sed dui metus, faucibus eget, consequat eu, posuere a, erat. Vestibulum mattis ante.</p>
    <p>Fusce mi erat, egestas in, luctus a, congue ut, ligula. Ut et felis. Cras nec purus. Integer suscipit, ligula congue tincidunt cursus, pede mauris dapibus nunc, non sodales purus lacus vitae massa. Sed orci. Aenean sodales accumsan orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla rutrum. Duis ut mi. Donec aliquet pede quis nisi. Suspendisse vehicula, turpis id scelerisque accumsan, lacus nulla hendrerit felis, et iaculis orci libero ut velit. Integer et mauris nec enim vestibulum tincidunt. Curabitur cursus, ipsum eu pulvinar viverra, metus nisi pellentesque urna, ut aliquam erat mi eget mi. Aenean lobortis augue ac velit. Aliquam nisi tortor, fermentum sit amet, nonummy vel, volutpat at, est. Pellentesque leo orci, consequat quis, rutrum a, ultricies venenatis, nisl.</p>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>
Code: 
@charset "UTF-8";
#wrapper {
    width: 750px;
    margin-right: auto;
    margin-left: auto;
    background-color: #F7D4D9;
}
body {
    margin: 0px;
    background-color: #ab9791;
    background-image: url(texture4564058.gif);
    background-attachment: fixed;
}
#wrapper #body1 {
    background-color: #F7D4D9;
    background-image: url(rose.jpg);
    background-repeat: no-repeat;
    background-position: right top;
}
h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #5A2C3A;
    text-align: right;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 32px;
    line-height: 1px;
}
h2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: bold;
    font-style: normal;
    text-transform: capitalize;
    width: 600px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #663A40;
    margin-bottom: 10px;
    margin-left: 20px;
    line-height: 10px;
    padding-bottom: 4px;
    color: 391719;
}
p {
    font-family: Georgia, "Times New Roman", Times, serif;
}
#wrapper #body1 p {
    @charset "UTF-8";
#wrapper {
    width: 750px;
    margin-right: auto;
    margin-left: auto;
    background-color: #F7D4D9;
}
body {
    margin: 0px;
    background-color: #ab9791;
    background-image: url(texture4564058.gif);
    background-attachment: fixed;
}
#wrapper #body1 {
    background-color: #F7D4D9;
    background-image: url(rose.jpg);
    background-repeat: no-repeat;
    background-position: right top;
}
h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #5A2C3A;
    text-align: right;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 32px;
    line-height: 1px;
}
h2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: bold;
    font-style: normal;
    text-transform: capitalize;
    width: 600px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #663A40;
    margin-bottom: 10px;
    margin-left: 20px;
    line-height: 10px;
    padding-bottom: 4px;
    color: 391719;
}

#wrapper #body1 p {
    padding-right: 10px;
    padding-left: 10px;
    line-height: 20px;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: 4C1B1B;
}

p {
    padding-right: 10px;
    padding-left: 10px;
    line-height: 20px;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: 4C1B1B;
}
 

Attachments

  • sc.jpg
    sc.jpg
    67.9 KB · Views: 141
I see that you've already cleaned up a few things on your live page, but one little bit does still stick out:

color: 4C1B1B;

should be

color: #4C1B1B;


Are other details in there that you wanted to display differently?
 
Thanks, The things I just cant figure out is my I cannot over ride what is default for <p> and why my margin is not showing up
 
P attributes seem to allow changes (to padding, color, etc.) just fine here using a #wrapper #body1 p {} block, working from a locally saved copy of your site.

Remember that with webkit browsers (Safari etc.), you usually need to clear the cache manually to make CSS changes show up.
 
...
#wrapper #body1 p {
@charset "UTF-8";
}
#wrapper {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #F7D4D9;
}
...

you're missing the close bracket in your css after your charset.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back