Paragraph Breaks Not Working?

[koryb1]

I am building a new ShopSite site (my second) and am using the Deskman theme. When I use <p></p> tags in the More Information Text field, I am not getting paragraph breaks. Instead I am getting line breaks. As an example:

<p>This is line 1.</p>
<p>This is line 2.</p>

Does NOT render as:

This is line 1.

This is line 2.

Instead I get:

This is line 1.
This is line 2.

I have not made any changes to the templates or CSS.

On my other ShopSite site I use these same tags and they work as expected. What do I need to do to get them to act the same way on my new site?

Thanks in advance!

Kory

[Jim]

The style for p tags is overridden in the full.css file

Code: Select all

p {
    text-align: justify;
}
p, div {
    margin-bottom: 0;
    margin-top: 0;
}

So the default action of the <p> will not display. You will need to modify the css in the full.css file if you want it to display differently.

[koryb1]

Thanks Jim for shedding some light on this. I am familiar with the process of editing that css file, but am not 100% certain what the edit should be. Could you please clarify? In the full.css file I find this:

p {text-align:justify; text-justify:inter-word;}

Note the above appears in the css in 3 different places.

Are you suggesting that I replace the above with the code you provide below?

Thanks again!

[Jim]

I'm not a css expert but my guess is that it would be coming from the

Code: Select all

p, div {
    margin-bottom: 0;
    margin-top: 0;
}

section.

I think that code makes it so there is no spacing on the top or bottom of the text.
According to http://www.w3schools.com/tags/tag_p.asp the default style for a <p> tag for most browsers is

Code: Select all


p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}


So you could add that code to the bottom of the full.css and it should override all previous definition in the file. You could try this out by putting the style in one of the text fields for a page and republishing. Use this code on html pages, or in ShopSite text fields, so you have the <style> tags around the code

Code: Select all

<style>
p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}
</style>

[koryb1]

This was everything I needed Jim - thank you! Testing with the style tags in a Product text field worked, and then I added the code to the bottom of the full.css file for a site wide fix. All is well - thank you again!

Have a great night,

Kory