HTML code not rendered correctly or altered by WordPress
-
Hi, this issue has probably been over-discussed, but I still cannot find a consistently working solution. All I want is that supported HTML code to be rendered as documented. As per http://en.support.wordpress.com/code/, CODE, PRE and DIV are supposed to be supported. The source referenced in the article, W3 Schools, has an example which demonstrates how to use DIV and PRE for creating a text box with horizontal and vertical scroll bars – see http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_pre – a bit of editing required to add a DIV object. The code works if saved as .html and opened in a browser, but not in WordPress.
To date I have not found a reliable way to make WordPress display a text box with vertical and horizontal bars. My code works outside it, but WordPress decides it knows better and it massages my code, despite its claim that it supports DIV and PRE.
Any help will be much appreciated.
Thanks.
The blog I need help with is: (visible only to logged in users)
-
Hi there. I see someone has tagged this for staff, but you can look at this in the meantime:
I have used the type of text box you describe in a sidebar widget, but I tested it in a regular post as well and it works there. See these examples with both plain text, and with pre-formatted text from the W3Schools example:
<div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #ccc;">Just some random text to test this code. See both horizontal and vertical scrollbars the moment the text becomes too long to fit inside the available space. Just to test a long enough word for the horizontal space: supercalifragilisticespialidocious (no idea if I spelled that correctly ;-) )</div><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #ccc;"> <pre>Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> </div>Maybe you missed an attribute or value in your div code? If it still won’t work it would help if you can post the code you’re trying to use here, so we can see it. Post it between backtics so we can see the actual code.
-
Thanks kokkieh, I tried all these and many more. I’ve been (and still am) banging my head against the wall. You quote the very code from w3schools which I was referring to. As I mentioned already, it works if saved as stand-alone html file, but not within a WordPress post.
– Tried div with paragraph – works if no code-like formatting requires, see some of my recent blogs.
– div in div – works a couple of times, only to find half a day later that WordPress in its wisdom removed all formatting, including &emsp and  , messing it up completely.
– pre in div – epic failure regardless whether I use raw HTML in text mode or the PRE format from the drop-down list in visual mode
– code in div – epic failure regardless whether I use raw HTML in text mode or the CODE format from the toolbar.I only started to blog this year and only have a couple of blogs, but I find WordPress extremely limiting, capricious, unpredictable, inconsistent – pick one or all you like. Seriously thinking of moving my blogs away.
I would love to see an official staff reply on this topic.
I also dislike the fact that although I have selected to get notified via e-mail of followup posts, I received none, I should have been notified of your post.
I no longer dare publishing my posts as I don’t know what my readers will end up seeing.
-
As I said, I tried these in a WordPress.com post and they worked perfectly for me, so there might be another problem restricted to your blog. I have noticed the code can get quirky from time to time, removing tags that should be there or even adding tags that are completely unnecessary.
This thread is tagged for staff, so just be patient while waiting for them to reply. Hopefully they can help you get to the bottom of this.
-
Kokkieh, my div in div looks like this (hope it will render correctly)
<div style="width:750px;height:300px;overflow-y:scroll;overflow-x:scroll;font-family:courier;background-color:#d3d3d3;color:black;line-height:1;padding-left:10px;padding-top:10px;"> <div style="width:900px;"> global   log 127.0.0.1 local0 info   maxconn 10000   daemon .... </div> </div>and the preview is perfect: https://ezoltan.files.wordpress.com/2014/10/textboxwithscrolldisplayedcorrectlyinpreview.png
However when I return a couple of hours later to continue work on the post, it removes all &emsp characters, it reformats the text, and it’s just a mess. No consistency in rendering over time.
-
Err… See the tabbed entries? (log, maxconn,daemon) – I used ampersand-emsp in my post above, and it got rendered instead of being displayed as I typed, although I included the whole block between backticks.
-
-
I am running an inherited custom WordPress site on BlueHost. I am trying to code certain sections with an unordered list and font codes:
- <b>bold</b>
- <i>italics</i>
And yes, I have also tried it as:
- bold
- italics
When I view the page in the previewer, it renders correctly. When I view the page on the website, the formatting is gone. When I do a “show codes” on the page, the format coding is GONE.
Bluehost says it it either a coding issue or a WordPress issue. Since the page renders correctly in the previewer, it can’t be the coding. How do I keep the formatting code?
tampawriters.org
-
Hi there!
@sandara01 – You’ve reached support for the free sites hosted at WordPress.com. Because your site is self-hosted with a different provider, support staff at WordPress.com do not have access to your site’s files or the ability to provide support for your current issue.
You can find support for your self-hosted WordPress site here:
@ezoltan – Can you give me a link to an post or draft where you’re having this problem? I’ve published the test code on one of my test sites, so I’ll check and make sure it still looks the same in a little while, but it would be helpful to see exactly what you’re looking at.
-
shawnajroberts, sorry for the late reply, I was on holidays.
I do not have a *posted* blog with this problem simply because I am getting inconsistent and undesirable results in the preview. I do not feel confident that my readers will see what I want them to see.
I haven’t touched my last blog, still being drafted, for over a week, being away. Now that I am looking at it, it appears okay. I didn’t preview it every 5 minutes though, as I did when I posted my experience.
If you have access to my drafts then you’ll find the section which I referenced to Kokkieh earlier in this post. I don’t know what you’ve done to test it, but my text is 117 lines x 112 columns. I just couldn’t get a consistent output in the preview. Sorry, I cannot give you a more precise reference, I know you’d need more.
I’ve also seen posts which complained about possible limits in a single post in terms of word count, length and the like. My problem draft is rather long, WordPress might have issues rendering it (although I would find it rather unusual in this day and age).
Again, if you have access to my only draft, I encourage you to take a look at it.
I’ll check back to see your reply – although I have “Notify me of follow-up posts via e-mail” ticked, it doesn’t work, so I have to take the rather inefficient approach of periodically polling this forum for possible replies. It would be much appreciated if e-mail alerting would be fixed.
Thanks.
-
Thanks for the info! I took a look at your draft post. I wasn’t able to see the nested divs break. However, it does look like there’s something awry with your page’s coding. When I view the post in Chrome, I can scroll to the side quite a ways.
I’m still trying to track down which part of the post is making this happen. Fixing it might fix the inconsistency in your code.
As for the email notifications, you should be getting them. I’ve subscribed to this thread just to make sure, but I haven’t seen any wide spread reports of missing forums subscriptions. Can you make sure its not in your spam folder? And confirm that the email address listed here is the one you’re logged into:
-
@Shawnajroberts, thank you for the update. I provided the snipped in an earlier post in this thread along with a screenshot showing the (kind-of) working code. You are seeing exactly what I mean: I put in my code, only to find it morphed into something grotesque when I return later. Yes, you can still scroll left and right, up and down with the two embedded DIVs (not with PRE or CODE though), but all my &emsp spaces are history – unilaterally stripped by WordPress.
From the screenshot you can see that I had the lines correctly tabulated at the time when it was taken, because I meticulously prepended them with
&emsp. If you check my code now, they are history.Another example of code stripping is that WordPress’ “smarties” remove inline font tags. For instance, I type
<span style="font-family:courier;color:black;">haproxy.conf</span>to change the font and colour of some words in the text. What I get instead is<span style="color:black;">haproxy.conf</span>– notice the missing font-family tag. All such-like inline code patterns in my draft included a font-family tag once upon a time; sadly they are all gone. At least the colour is preserved.As you have quite correctly observed, the whole stuff is awry.
I am glad that you are as puzzled as I am. Clearly there is something fishy with the spell-checking/rendering/code-correctness-checking/whatever-background-smarties engine. I tried editing my code with IE10 and Firefox 32.0.3 hoping that it’s my browser. Well, it’s not.
I hope WordPress can fix it, otherwise I’ll need to find an alternative service which is capable of displaying industry-standard HTML code.
Re e-mails, I have the correct address. I’ll check my spam filters.
Please let me know your thoughts.
-
@Shawnajroberts, here is another WordPress rendering gem for your head-scratcher collection:
– The code:
https://ezoltan.files.wordpress.com/2014/10/rendering-issue-1-code.png
– The preview:
https://ezoltan.files.wordpress.com/2014/10/rendering-issue-1-preview.pngWhile the rendering is clearly broken, on the other hand I am not confident that WordPress will not tinker with my code by next time I get to work on it again.
-
@Shawnajroberts, another formatting mishap: I discovered if I have a
<div> <code> ... some text ... </code> <div>construct, then WordPress replaces it with
<div> <code><code> ... some text ... </div>Something is awefully wrong with WordPress…
-
Are you aware of the only HTML tags we can use on WordPress.COM blogs? They are listed here http://en.support.wordpress.com/code/#html-tags
-
@timethief, thank you for your input. Yes, I’ve been there. If you *carefully* read my comments, along with screenshots, you’ll notice that in my very first post I refer to the same support page, and the tags I am trying to use are among those listed as allowed:
However WordPress thinks it knows better than I what I want to do and it strips/replaces/rearranges my code – see my last post to which you’ve just replied.
@Shawnajroberts, I’ve come across this thread: https://en.forums.wordpress.com/topic/non-breaking-spaces-are-lost%e2%80%94and-shouldnt-be?replies=3, and I also followed the links by
Can you please comment on the following:
1. Code being stripped by the WordPress editor.
2. WordPress’ position regarding jaygreenstein’s comment regarding support for true WYSIWYG when compared to other blogging sites.
3. Required HTML coding skills to effectively AND CONSISTENTLY use WordPress, keeping in mind that your users are mostly writers, not coders.
4. What is a consistently working way of implementing a horizontally and vertically scrolling text box which leaves formatting of its content alone, that is:
– If I type two spaces to indent a line, it will leave the line indented.
– If I type a very long line, it will scroll through instead of breaking it.
– If I leave a blank line, it will display a blank line.
– If I type two lines on separate lines, they’ll stay on separate lines.
– If any of the above break HTML coding rules, then replace them with the correct code which has the same visual output.Currently I am getting this mess: https://ezoltan.files.wordpress.com/2014/10/messed-up_text_box.png
Is it something WordPress can handle, or is it too much for it?
FYI, I started looking at alternative blogging sites
Thanks.
-
– The code:
https://ezoltan.files.wordpress.com/2014/10/rendering-issue-1-code.png
– The preview:
https://ezoltan.files.wordpress.com/2014/10/rendering-issue-1-preview.png@ezoltan: try with this code:
<div style="width:750px;height:30px;font-family:courier;background-color:#d3d3d3;color:black;"><p style="margin-left:10px;"><code>ln -sf /usr/lib/systemd/haproxy.service /etc/systemd/system/multi-user.target.wants/</code></p></div> It’s work fine for me —> http://custommenu.wordpress.com/2014/10/23/test-html/
-
-
Hi ezoltan – sorry for the delay.
I tested your example in this comment. It looks like your second div tag was missing the / and once I added that back to my code it published fine without any stripping.
I also wasn’t able to replicated the stripping of ‘font-family:courier;’ in this example.
Its likely that both of these things are happening because of typos. We do have stripping enabled because we don’t allow JavaScript and the like. Empty span tags also get stripped. The stripping sometimes also grabs mistyped codes.
As for the original post you’re having trouble with, it looks like you’ve made some changes since I was looking at it yesterday. I’m not currently seeing the scrolling issue I mentioned, or the issues you mentioned. Are you still having trouble with these?
And this seems to be how you entered the text into the text editor. When I look at your code, the lines without breaks are that way in the editor. If you’re copying and pasting this text from elsewhere, its likely a fragment of that. Make sure you’re using the Paste as Text function.
1. Code being stripped by the WordPress editor.
I’m not exactly sure what you want me to confirm here? We do strip some forms of code. I haven’t been able to reproduce anything through this thread that is being stripped erroneously. I’m happy to report any issues I’m able to reproduce back to our developers.
2. WordPress’ position regarding jaygreenstein’s comment regarding support for true WYSIWYG when compared to other blogging sites.
jaygreenstein’s comments actually seem to be more about the transferring of a document from an editor like Microsoft Word to our editor. We have no control over the additional tags programs like Microsoft Word add to their documents in order for them to display correctly. These tags are exactly what breaks posts when they’re moved to WordPress though.
I understand the frustration of invalid code being stripped, however as he points out, our users aren’t coders. Trying to troubleshoot broken code that you didn’t know was transferred with your content is usually harder than having to go back and enter an indentation or other spacing fix.
3. Required HTML coding skills to effectively AND CONSISTENTLY use WordPress, keeping in mind that your users are mostly writers, not coders.
For almost all uses, our users don’t need to have any understanding of code or HTML. Most of them aren’t ever going to use the code shortcode or have invalid code stripped from their posts. I understand that this is not your personal experience because you do use code and you are having trouble, but most of our users never use HTML in their posts.
4. What is a consistently working way of implementing a horizontally and vertically scrolling text box which leaves formatting of its content alone, that is:
– If I type two spaces to indent a line, it will leave the line indented.
– If I type a very long line, it will scroll through instead of breaking it.
– If I leave a blank line, it will display a blank line.
– If I type two lines on separate lines, they’ll stay on separate lines.From all of my testing the code you gave me is working. However, you may want to be using pre tags instead of the code tags. Pre tags will preserve your formatting better.
The issues you’re having seem to be related to copying and pasting and mistyped code.
-
@Galois, thank you for the suggestion. That is exactly what I typed, except I typed the tags on separate lines for readability. To my knowledge that is allowed in HTML. WordPress re-arranged it as seen in the screenshot.
@shawnajroberts, thank you for your response. Yes, I did make changes, trying various tricks suggested by other bloggers.
“It looks like your second div tag was missing the /…” – Correct, now I see it.
“And this seems to be how you entered the text into the text editor.” – Not exactly. I copied the actual haproxy.conf file from my Linux box via WinSCP and opened it in a plain text editor: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-haproxy-transfer.png
Let’s recap:
1. Code being stripped:
– I had a typo in font-family in my <span> tags which I copied and pasted everywhere, along with the typo, therefore it was wrong everywhere. Reviewed it and found the typo, so this one seems to be working now. Having said that:
– leading  ’s are stripped consistently. For instance:
—What I typed: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-01-typedcontent.png
—What WP did to my code: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-01-massagedbywp.png
—Same code as local file: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-workingtextboxsourcecode.png
—Viewing local file works the way I want it: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-workingtextboxfromlocalfile.png2. I tend to agree that it is not easy to convert Word formatting to HTML. However in this day and age others are doing it, and they are doing it well. Having a gut feeling about it, I copied my text first into Notepad, then from Notepad to WP for the very reason of stripping Word formatting characters. What about plain text file? If I type leading spaces or tabs to make content readable, wouldn’t it make sense to replace them with valid HTML code to preserve the visuals? Yes, I can include empty cells or do other tricks, but why not automate it? Others are doing it already.
3. What *consistently working* provisions does WP provide for users with technical background like myself who want to publish code where visuals should be preserved?
4. I tried PRE too:
4.1 PRE in DIV: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-01-typedcontent.png
4.2 …and its output – notice that long lines break and there is no horizontal scroll: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-01-output.png
4.3 PRE in P in DIV, with wider P container, attempting to get horizontal scroll: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-02-typedcontent1.png
4.4 … and my P tag has been diligently removed by WP: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-02-removedtag1.png
4.5 That same thing in local file: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-02-typedcontentlocalfile.png
4.6 – …just works perfectly: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-02-localfileworksfine.png
4.7 PRE in DIV in DIV: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-03-typedcontent.png
4.8 …seems to stay put, but the output is atrocious. I wouldn’t torment my readers with an ugly-looking thing like this: https://ezoltan.files.wordpress.com/2014/10/rendering-issue-wptexteditor-pre-03-output.pngI do acknowledge that I had typos in my text and thank you for pointing it out. However WP has its share of making my life as a blogger a hell.
So what is a working solution? Can you post a tested and working code which stays put even if I flick between visual and HTML and produces the desired output? Consistently? Tabulated text in Hor/Vert scrolling text box?
Thanks.
- The topic ‘HTML code not rendered correctly or altered by WordPress’ is closed to new replies.
WordPress.com Forums 
