15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

No Space Between Paragraphs In Firefox

by JamesPenn
12 replies
  • WEB DESIGN
    • |
Hi guys,

My WP blog runs on the Genesis Framework with the Going Green Child Theme.

When I view a single post page in Chrome and IE it looks great, but for some reason when I view it in Firefox, there are no line breaks between paragraphs.

Take a look:

The Top 8 Uses For Lavender Oil

I've also been told that search engines read pages in something called Lynx? And when I preview my site in Lynx it has the same problem - so I'm wondering whether this lack of space is impacting my SE ranking.

Is there an easy way that I can add a line break between all paragraphs on all posts? Perhaps by changing something in my CSS?

Thanks a lot in advance for your help.

James
#firefox #paragraphs #space
  • Profile picture of the author Andrew H
    I looked at the source code for the main article on the front page. You don't have paragraph tags surrounding the paragraphs, they are just used in between the paragraphs - I think that is the problem.

    ie: normal content is like this:
    <p>your paragraph here</p>
    Your content is like this:
    <p></p>Your paragraph here<p></p>More content here<p></p>
    Hope that helps.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[5960131].message }}
    • Profile picture of the author JamesPenn
      Originally Posted by mcflause View Post

      I looked at the source code for the main article on the front page. You don't have paragraph tags surrounding the paragraphs, they are just used in between the paragraphs - I think that is the problem.

      ie: normal content is like this:


      Your content is like this:


      Hope that helps.
      Thanks for your reply.

      On the page I shared (The Top 8 Uses For Lavender Oil) I see only closing </p> tags. I don't see opening ones.

      In my Wordpress Post box when I'm making the post everything looks formatted fine in WYSIWYG view. In HTML view there are no opening or closing p tags.

      Going through 250 posts and adding p tags is not really an option.

      Is there a way to automate the process or to apply a change across all posts?

      James
      {{ DiscussionBoard.errors[5960193].message }}
  • Profile picture of the author Andrew H
    Oh interesting, your right there are only closing tags. It seems that Chrome adds the <p> tag in front of the closing tag to correct the improper coding, so that is why you see the spacing between paragraphs.

    As for adding the opening para tags automatically it is definitely possible, but beyond my expertise. You would have to run a query on the tables in the database and add a opening para tag after the closing tags that are there. If no one here can help you, you might try posting the problem on the stackoverflow site, there are some helpful programmers there.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[5960292].message }}
    • Profile picture of the author BlueLayerHost
      As long as your theme is using the function the_content(), WordPress will automatically put <p> tags on your paragraphs when you use the WYSIWYG editor.

      The only other issue may be is that there is no CSS assigned to your <p> tags.

      Edit: It looks like you have CSS assigned:

      #content .post p {
      margin: 0;
      padding: 0 0 10px;
      }
      Signature
      BlueLayerHost - Shared + Managed VPS Hosting
      BlueLayerMedia - Web Development
      WPMalware - Resource for WordPress Seurity + Exploits
      {{ DiscussionBoard.errors[5961008].message }}
      • Profile picture of the author JamesPenn
        Originally Posted by BlueLayerHost View Post

        As long as your theme is using the function the_content(), WordPress will automatically put <p> tags on your paragraphs when you use the WYSIWYG editor.

        The only other issue may be is that there is no CSS assigned to your <p> tags.

        Edit: It looks like you have CSS assigned:

        #content .post p {
        margin: 0;
        padding: 0 0 10px;
        }
        Thanks BlueLayerHost,

        Is there anything I can edit about that CSS to separate the paragraphs?

        Thanks,
        James
        {{ DiscussionBoard.errors[5963195].message }}
  • Profile picture of the author Istvan Horvath
    margin: 10px 0;

    What it does:
    margin-top & margin-bottom = 10+10=20px total between paragraphs

    The margin property can have from one to four values.

    margin:25px 50px 75px 100px;
    top margin is 25px
    right margin is 50px
    bottom margin is 75px
    left margin is 100px

    margin:25px 50px 75px;
    top margin is 25px
    right and left margins are 50px
    bottom margin is 75px


    margin:25px 50px;
    top and bottom margins are 25px
    right and left margins are 50px

    margin:25px;
    all four margins are 25px
    Source: CSS Margin
    Signature

    {{ DiscussionBoard.errors[5964768].message }}
    • Profile picture of the author JamesPenn
      Originally Posted by Istvan Horvath View Post

      margin: 10px 0;

      What it does:
      margin-top & margin-bottom = 10+10=20px total between paragraphs


      Source: CSS Margin
      Thanks Istvan

      I changed the CSS to this:

      #content .post p {
      margin: 5px 0;
      padding: 0 0 10px 0;
      }

      (10px was too much of a gap for me)

      The problem still persists however in Firefox and when I preview the page in Lynx. There are still no line breaks between paras.

      The problem must be that there are no opening <p> tags but for some reason there are closing </p> tags.

      Any ideas why and any ideas how I can fix this?

      Thanks,
      James
      {{ DiscussionBoard.errors[5968260].message }}
  • Profile picture of the author Istvan Horvath
    That brings up the question: how did you create those posts?

    Some kind of copy/paste or other "import" maneuver? If written in WP, when there is a blank line like below
    The problem must be that there are no opening <p> tags but for some reason there are closing </p> tags.

    Any ideas why and any ideas how I can fix this?
    WP would insert automatically where the gap is the closing/starting p tags...

    You can do some kind of search and replace, either on post level or in the whole database (NOT recommended if not familiar with MySQL queries: it can easily kill your whole blog!); i.e.
    replace </p> with </p><p>... or something like that.

    But the original problem comes from/with the source.
    Signature

    {{ DiscussionBoard.errors[5968377].message }}
    • Profile picture of the author JamesPenn
      Originally Posted by Istvan Horvath View Post

      That brings up the question: how did you create those posts?

      Some kind of copy/paste or other "import" maneuver? If written in WP, when there is a blank line like below

      WP would insert automatically where the gap is the closing/starting p tags...

      You can do some kind of search and replace, either on post level or in the whole database (NOT recommended if not familiar with MySQL queries: it can easily kill your whole blog!); i.e.
      replace </p> with </p><p>... or something like that.

      But the original problem comes from/with the source.
      The post is normally made by copying from a Word document using the "Paste from Word" feature in Wordpress. I then fix up any style and formatting issues in the Wordpress WYSIWYG editor. In the editor it shows the space between paragraphs.

      James
      {{ DiscussionBoard.errors[5968397].message }}
  • Profile picture of the author Istvan Horvath
    Just to rule out this as the source of error - can you experiment with a post and go through these steps:
    - from Word > copy/paste into Notepad
    - disable the wysiwyg animal in WP (Users > your profile)
    - paste the text from Notepad into the html editor
    - Save

    Are there opening <p> tags?
    Signature

    {{ DiscussionBoard.errors[5968477].message }}
    • Profile picture of the author JamesPenn
      Originally Posted by Istvan Horvath View Post

      Just to rule out this as the source of error - can you experiment with a post and go through these steps:
      - from Word > copy/paste into Notepad
      - disable the wysiwyg animal in WP (Users > your profile)
      - paste the text from Notepad into the html editor
      - Save

      Are there opening <p> tags?
      I followed those steps and there were still no opening p tags.

      Thanks,
      James
      {{ DiscussionBoard.errors[5970628].message }}
  • Profile picture of the author LA Grouch
    Try this...

    -Paste your content to notepad
    -copy the content from notepad
    -go to your WP post editor and switch to HTML mode
    -paste in the content from notepad
    -switch to Visual mode and space your sentences/paragraphs as you like

    Now Preview the post to see if it is laid out correctly.
    {{ DiscussionBoard.errors[5971231].message }}

Trending Topics