Where are the <p> tags coming from

[ruenel]

Hello @kstidham,

Thanks for writing in!

Please be aware that you are only allowed to insert plain text in the topbar content. The resulting HTML structure of the topbar content is this:

<p class="p-info"> Your Plain Texts </p>

You are permitted to use <a>, <span>, <br> and other inline HTML tags. You are NOT supposed to use <div> tags because it will break the structure. Please remove your div tag and replace it with span tag:

<div class="alignrightmc"></div>

Just replace it with:

<span class="alignrightmc"></span>

Kindly let us know how it goes.

[kstidham]

I appreciate your suggestion about the p vs div tags. I have 50 or more sites that need to be addressed because we never knew that and have used div tags with issue. Anyway, I changed them in this site’s topbar code and there are still p /p showing up in the code and creating unwanted line breaks. I moved things around and have made this work in desktop view. The mobile view has the unwanted p tag in it and is kicking the social icons down. I eliminated all the padding and margins and it is still way beneath the “Donate” button in the header. Please help.

[tristup]

Hi @kstidham,

It seems that you have added the <p class="p-info"> Your Content </p> into the TopBar as content. You don’t need to add the <p> tag as the content you add will be wrapped by default, the extra p tag is due to the p tag inserted into the content.

Hope it helps.
Thanks

[kstidham]

So is anyone going to help me resolve this or keep sending me responses that don’t work? There is a “randon” p tag getting inserted into my topbar code. It is not visible until you check the code from the live site. You will notice when you remove it that the spacing issue in mobile view, goes away.

With all due respect, I cannot remember the last time I submitted a tech support topic and you all resolved it before I did. I remember the old days when we first started using x theme and your tech support would help us resolve issues. Now you are resorting to answering questions with questions.

How do I eliminate the p tag that is being randomly inserted into the topbar code? If you do not have an answer, just say so. My client is not nearly as frustrated as I am. I have bought well over 70 licenses and am getting very close to finding a new alternative. Please advise.

[ruenel]

Hello @kstidham,

How do I eliminate the p tag that is being randomly inserted into the topbar code?

You don’t have to eliminate it. It appeared because of what you have inserted in the topbar content. If you temporarily remove your topbar content, you will find out that there is no <p> tags being generated.

It is best that you go over to your 70 sites and make sure that you only insert plain text and remove any <div> tags you have inserted in the topbar content because that is not the correct way and it can only lead you to an error and can even mess up the entire page.

Hope this makes sense.

[kstidham]

Ruenel, you are a smart ass. If you spent as much time trying to solve issues with your theme’s code, as you do disrespecting paying customers, perhaps my issue would have already been solved. Now that this has been established can we agree that you have no idea what is causing it and therefore disrespecting paying customers is what you have chosen to do. There is NO MANUALLY INSERTED P TAG in the code with the exception of what wraps the Donation button. You are the one that told me to user a P tag and not a DIV tag. What part of that do you not understand? The empty P TAG causing my vertical spacing issue is being inserted by your theme. Figure it out. If you have no answer, perhaps send this on to one of your associates that has more knowledge than you. That should not be too difficult.

*Important Lesson: I get you are not in the US so I will help you. The client (me) pays your bills. You do not disrespect the very people that consume your product because your knowledge of the product is limited.

[ruenel]

Hello @kstidham,

I do not mean to disrespect you or anything. I apologize if you feel that way.

Now, if we look back to your original screenshots, we can see that you have inserted a <div> tag in the topbar content. Because of that, the browser particularly Chrome generates the <p> tag. It is not the theme that generates that. Actually, if you check your site with the Firefox Developer Tool, it will tell you that there is an excess </p> tag.

I have mentioned it before that the topbar content only accepts plain texts. Though there are exceptions, only the <a> , <span> , <br> and other inline HTML tags are permitted. Other than that, it will result in an issue in which in your case, the browse generates the p tag.

If you only insert “Reach us at: (123) 456-7890” in your topbar content, no p tag will be generated in the browser dev tool. In the browser output, it will display like this: <p class="p-info"> Reach us at: (123) 456-7890</p>.

If you need a donate button and would like to display it to the right side, your topbar content should be like this:

Reach us at: (123) 456-7890 <span class="alignrightmc"><a class="x-btn x-btn-flat x-btn-pill x-btn-regular" href="/donate/" title="Donate" data-options="thumbnail: ''"><i class="x-icon x-icon-o-arrow-alt-circle-right" data-x-icon-o="&#xf35a;" aria-hidden="true"></i>DONATE TODAY</a></span>

Hope this helps.

[kstidham]

See the attached screenshot of a different site. I am using x theme and there are several random p tags showing up and causing spacing issues. If you do not have a solution, please save your comments. I have added no custom code. This issue is not just happening to me.

[prakash_s]

Hello @kstidham,

In order to help you with your concern, we need to check your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[prakash_s]

Hello @kstidham,

Thanks for sharing the credentials. I went ahead and created a page on your server where I have added the text from your given page URL. When I add the text with WP Table builder shortcode it adds an empty paragraph tag in the editor but when I add the text without WP Table builder shortcode, it works perfectly. I have also tested by deactivating the plugin and it worked fine. I would suggest you deactivate the WP Table Builder plugin and then check it at your end.

Please note that we don’t provide any third-party plugin support. It is out of the support scope.

Thanks for understanding

[kstidham]

Thanks for looking into this Prakash. There is still an issue with the updated theme or cornerstone adding p tags. For the last 5 or 6 years we have been using div tags in the header. This was not an issue until recent updates. Now you cannot use a div tag in the topbar code…we can adjust to that. One of your associates is trying to tell me that the updates have made no difference. Problem we are having is there are now new random p tags showing up in every site we have used the x theme on in the past 6 years. Check out another example below. The topbar now has an arrant p tag that throws off the formatting. I have heard from a dozen clients this week that the topbar formatting on their sites is not normal. There are another 50-60 that have just not noticed. Please help me figure this out.

*Notice the offset of the left vs the right text. This was fine just a few weeks ago. Something has changed and is affecting every site we have developed where we used the topbar. The thing these sites all have in common is x theme and cornerstone.

https://www.folsomchamber.com/

Here is another site (https://www.showme.org) that has a new p tag that has never existed before. When you see the content closer to the top then the bottom or vice versa, it is not something we intentionally did. This is a bug. It has to be fixed. The p tag inserts an empty paragraph in the topbar and knocks the next p or class down. I am absolutely going nuts…and broke. There has to be a fix and I cannot be the only person this is happening to. So to clarify, Ruenel missed the entire part about a randomly inserted p tag. He kept referencing the p tag we were inserting in order to keep content separate. THIS IS A P TAG EXPANDING HORIZONTALLY ACROSS THE ENTIRE TOPBAR.

I was just in spending another several hours deactivating plugins and looking for solutions to this issue. I noticed that this topbar code has div tags in it. You know where I got this code? That’s right, from your staff. Look through my topics and you will see where the Themeco folks gave me this code and it has worked great for at least two years. Now after recent updates it is causing formatting issues b y inserting a random p tag. The p tags are always encompassing before references. Below you can see where it shows up in the p-info class as always even though this one is not the entire width, it is still causing spacing issues. I am forcing the topbar to only be 46px high. Otherwise it the green bg fills much more area.

[ChadAustin]

I’m a highly certified and experienced coder of 25+ years and this same P tag issue is happening with me. https://liftingsolutionsllc.com/

[christian]

Hey guys,

Just a little background about the Topbar Content. It is wrapped in <p class="p-info"></p>. If you insert block HTML elements inside it like another p or a div, the browser will move it out so you’re left with an empty p tags. With that said, do not use block elements. Only use inline elements like the span. It’s actually the browser causing that’s doing this which is normal because it attempts to fix broken or bad HTML.

I’m not sure why you got this issue just after updating when this has been and still is the Topbar setup.

Hope that helps.

[kstidham]

Even more mind boggling is, I have used the div tags for 5-6 years and they have always worked fine. Now they don’t and all the sites I have used them on are no longer formatted correctly. With that said, I am still confused as to how to format topbar content.

[christian]

Hey @kstidham,

That certainly is mind-boggling but in my sites, it has been that way that if you use block elements, the browser will move the block-based elements out of the <p class="p-info"></p>.

Please use Inline Elements now as that is the proper setup.

Thanks.

[kstidham]

Can you clarify “block-based elements”. I do not care how we have to handle it…we just want to take care of our clients and I have gone weeks with no answer for them. Please advise.

[tristup]

Hi @kstidham,

The Block Level element always begin on new lines, and that is why it comes out of the <p class="p-info"></p>. I would suggest you follow the way explained by my colleague in his post.

Thanks

[kstidham]

No one ever answered why the format we have used for 5 or 6 years…just became obsolete. No need to reply. Just making the point that after a month of volleying messages, no on ever answered my original question. Funny how things work a certain way for years and then, not anymore. Have a great day. I’ll figure it out myself.

[ruenel]

Hello @kstidham,

Please check out this first:

• https://www.google.com/search?q=can+you+insert+a+heading+tag+inside+a+p+tag
• https://www.google.com/search?q=can+you+insert+a+div+tag+inside+a+p+tag

No one ever answered why the format we have used for 5 or 6 years…just became obsolete.
It was invalid in the first place. It may have work for you for over 5 years because the browser allowed it. In Chrome browser, it will automatically generate a closing or missing tag to try to fix and avoid breaking up the page layout. The same way Firefox browser does which is why you were seeing empty <p></p> tags.

If you would let me explain it simply like this sample possible code:

<p class="p-info"><div>Some text here</div></p>

<p class="p-info"><h2>Some title heading title here</h2></p>

The code above is invalid because you are not supposed to insert a <div> tag or a <h2> tag inside a <p> tag. In Chrome, the browser engine will generate tags to fix it which will give like this:

<p class="p-info"></p>
<div>Some text here</div>
<p></p>

<p class="p-info"></p>
<h2>Some text here</h2>
<p></p>

And this is what is happening on your topbar content and which would explain why your code has worked for over 5 years.

Hope this explains it briefly.