css and <p> tag

[searain]

the css class pr_content is as below

pr_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
a.pr_content:link{text-decoration: none; padding: 0px; color: #E5E529;}
a.pr_content:visited{text-decoration: none; padding: 0px; color: #E5E529;}
a.pr_content:hover{text-decoration: underline; padding: 0px; color: #FFDD00;}
a.pr_content:active{text-decoration: none; padding: 0px; color: #E5E529;}

as you can see the css will leve 10 px padding space in the right, bottom and left.

But for the following source code

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

Only the first paragraph, "><p>Mortgage rate is increasing again.</p>, has the 10 px padding space.

The second paragraph, <p>How to beat it?&nbsp; Lock it with us!</p>, will still keep the pr_content fonts style, but not get the 10 px padding space as the first paragraph does.

I didn't get the help from css forum, they might just think why you have <p> there, just have <p class="pr_content">, everything will be fine.

But as a matter of fact, "<p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p>" is what i get from database. This data with <p> tags is originally input through tinymce rich text editor.

So <p> tag has to be allowed to be used here.

My questions are

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

How can I make sure all every <p></p> which I get from database and put between <span class="pr_content"></span> will get the 10 px padding space at the left, right and bottom as the css class defines?

Is there CSS solution?

I can have a php solution which is str_replace every <p> tag from the database with <p class="pr_content">.

Any better php solutions?

Thanks!

[samudasu]

This has nothing to do with PHP and all to do with CSS. You could do something like this:
.pr_content p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

[searain]

right it is css issue. i went to a css forum doesn't get answers there. and i am not the css designer in this project and i am trying to find a css solution to make my php embedded well with the css tags html page.

but pure css designer does't have to deal with this kind issues. this issue comes from I grab some contents(tags) from database and embedded into html page with css style. so i think maybe some other php programmers will run into this issue and have a css solution or php solution.

your advice works.

but i have a new problem now.

with your code

.pr_content p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

works fine now.

but

<p class="pr_content">Hello World</p> is not working now. It lose the fonts defination etc.

Do you have any advice so I can make both paragraphs working?

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

<p class="pr_content">Hello World</p>

plus, my css knowledge is limited, what does this ".pr_content p" mean in css, thanks!

sorry to ask you a css question here but i didn't get better answer from css forum i went to.

thanks again!

[bpat1434]

And you can even streamline it even further to be:

span.pr_content,
span.pr_content p,
p.pr_content{
  font: 12px Verdana, Arial, Helvetica, sans-serif;
  color: #EDEDED;
  line-height: 1.5em;
  padding: 0 10px 0 10px;
}

It does validate in case you are wondering.

Here's what it means:

"." is a class designator
"#" is an id designator

So if you have <span id="main"><span class="sub"></span></span> your CSS would look like:

#main{}
.sub{}

So, one of the two characters denotes what type of designation (class or id) it is. IDs are meant to be unique, classes can be reused. Directly following it (no space in between) is the name. If there is a space, then it means that it is under it. So our original code can be coded as:

#main .sub{}

So your code .pr_content p says that for each p (paragraph) tag that is within ANY element that has the class of "pr_content", apply the style.

Expanding even further:

<body>
<div id="outside">
  <div class="outside2">
    <div class="inside">
      This is some sample code.<br><br><br>This should show 3 semi-boxes.
    </div>
  </div>
</div>
<div class="outside2">
  <br>And this is just a green area.<br>
</div>
</body>

If we have this CSS:

#outside{ background-color: #f90; padding: 5px; }
#outside div.outside2{ background-color: #000; padding: 5px; }
#outside div.outside2 div.inside{ background-color: #fff; }
body div.outside2{ background-color: #090; }

Now, this CSS will have 3 boxes, and a green one below them. You may be wondering why the 2nd box (black background-color) is not green. It has the same class name, it should be the same. Well, we defined that if the div is inside (or a sub-element) of any element with ID of "outside" the background color will be black. Only divs with a class of "outside2" that are directly under the HTML <body> tags will have a background color of green.

I know it's not your job to know CSS, but you should understand a little.

~Brett

[bpat1434]

Expanding even further:

<body>
<div id="outside">
  <div class="outside2">
    <div class="inside">
      This is some sample code.<br><br><br>This should show 3 semi-boxes.
    </div>
  </div>
</div>
<div class="outside2">
  <br>And this is just a green area.<br>
</div>
</body>

If we have this CSS:

#outside{ background-color: #f90; padding: 5px; }
#outside div.outside2{ background-color: #000; padding: 5px; }
#outside div.outside2 div.inside{ background-color: #fff; }
body > div.outside2{ background-color: #090; }

Now, this CSS will have 3 boxes, and a green one below them. You may be wondering why the 2nd box (black background-color) is not green. It has the same class name, it should be the same. Well, we defined that if the div is inside (or a sub-element) of any element with ID of "outside" the background color will be black. Only divs with a class of "outside2" that are directly under the HTML <body> tags will have a background color of green.

I know it's not your job to know CSS, but you should understand a little.

~Brett

[searain]

thanks!

"So your code .pr_content p says that for each p (paragraph) tag that is within ANY element that has the class of "pr_content", apply the style."

Understand now.

after I change

.pr_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

to

.pr_content p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

so pr_content will apply to each <p> tag.

But Now the regular paragraph is not working.

<p class="pr_content">Hello World</p>

What is I missing here? thanks!

[bpat1434]

Use the code I posted, it works.

~Brett

[searain]

use the code you gave me.

<p class="pr_content">Hello World</p>

is fine

but in this line codes

<span class="pr_content"><p>Mortgage rate is increasing again.</p><p>How to beat it?&nbsp; Lock it with us!</p></span>

Now, the second paragraph
<p>How to beat it?&nbsp; Lock it with us!</p> is fine. with padding space 10.

but first paragraph

<p>Mortgage rate is increasing again.</p>

now is with extra padding space, it has 20 px padding space now.

I must miss something here.

my origianl css style sheet is like this, if I replace the .pr_content part with your code and I have the first paragraph with the extra padding space as I explained above.

body {
margin-left: 6px;
margin-top: 6px;
background-color: #cccccc;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold
color: #EDEDED;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

.extBoxGrey {
border: 1px solid #989898;
}
.extBoxBlack{
border: 1px solid #636262;
background-color: #4C4C4C;
background-image: url(../siteImages/navSpacers/pageFooter.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.6em;
color: #B7BFC3;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
}
a.footer:link{text-decoration: none; }
a.footer:visited{text-decoration: none;}
a.footer:hover{text-decoration: underline;}
a.footer:active{text-decoration: none;}

.google {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.4em;
color: #666666;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.pr_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EDEDED;
line-height: 1.5em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
a.pr_content:link{text-decoration: none; padding: 0px; color: #E5E529;}
a.pr_content:visited{text-decoration: none; padding: 0px; color: #E5E529;}
a.pr_content:hover{text-decoration: underline; padding: 0px; color: #FFDD00;}
a.pr_content:active{text-decoration: none; padding: 0px; color: #E5E529;}

Please help.

[bpat1434]

It's been said that this is a CSS issue, not a PHP issue. This is a PHP forum, not a CSS forum. If you want further help, go to CSSCreator. There's plenty of help there.

If you are a coder, then hand this off to your web-designer. This should not be an issue for a coder.

~Brett