Spacer added automatically

You can NOT edit html code in the Visual editor. Turn it off in admin > Users > your profile.

On a side note: you don’t really need tables for layout – that’s bad practice.

Moshu:
With all due respect, you have not answered my question, nor have you offered direction for improvement. I am not advanced enough to make any progress with your post. Shutting down half of WordPress and telling me I am using bad practices pretty much leaves me dead in the water.

Firstly, I am not editing html code in the Visual Editor, I am editing html code under the html tab. And, the only reason I am editing the html on that page at all is because the visual editor is adding that extra space. The dreaded spacer html is being inserted in random places when I switch over to the Visual Editor, apparently, but turning off the friendly tool of the two tools for editing which are in WordPress just to get away from an anomaly strikes me as taking Reverse out of a car transmission because you hit something backing up. No doubt there are people like yourself who are very adept at editing html without seeing the result in the Visual Editor, but I am still a newbie and I need to see what I am doing, formatting copy, placing .jpgs etc. Plus, what is it there for, anyway.

As far as tables for layout is concerned, it may be bad practice from your standpoint, but what is good practice? I went through what seemed like a terrific amount of research to try to find what acceptable layout practice for my application would be in WordPress, and came up empty. I finally found that TinyMCE offered an advanced version which included tables, and it is giving me the desired result.

Have a little mercy on me and give me some clue how to line up pictures and copy, like my page above has, without tables. I know very little about .div and .css files (although a lot more than 3 months ago). From what I understand, though, you cannot use .div code with the html and visual editors (I really don’t think I know enough to edit my pages without referring to the Visual Editor).

So, using both the html editor and the Visual Editor, I am eager to learn how to edit my pages with the best WordPress layout practice without tables and the dreaded spacer html code. If the only answer is to forever edit without the Visual Editor on, and use .div codes (which will be deleted the first time I turn the Viz Editor on), then I suppose I will have to rely on the crutch of tables and be considered a WordPress moron until someone can actually help me.

I have learned a lot in the last 10 years or more of editing a website, and a lot more in the last 2 months using WordPress. However, I know only a tiny percentage of what there is to know, so any help is appreciated.

You should never switch back and forth between the visual and html editor, it will mangle your code. These two editors just do things very differently.

Wow! That’s just really hard to get my mind around. So, what do you typically do, deal with the html, then “View This Page” to see what you have done? I would have to be so much more comfortable with html to be able to do that.

Is this what is commonly done: Instead of placing a pic in the VE, I would have to type out:
<p style="text-align: center;"><a href="https://damariscarbaugh.com/wp-content/uploads/2008/09/usfour.jpg"><img class="size-medium wp-image-547 aligncenter" title="usfour" src="https://damariscarbaugh.com/wp-content/uploads/2008/09/usfour-300x225.jpg" alt="" width="300" height="225" /></a> </p>

How is that an improvement? There are so many opportunities for error.

After all these years of WYSIWYG, seems like WordPress would not be so handcuffed. It seems like cutting down a tree with a chainsaw without starting the motor! Please tell me I am missing something.

WordPress does not have the text of “spacer_” anywhere in it. It’s not adding that code to your html. Maybe you have a plugin interfering or something similar.

And I agree with moshu, that table layout is terrifying. Instead, add your pictures after each bit of text describing them, float them left, and give the paragraphs for that post a clear:left style. That should line them up nicely. Might need to fiddle with it a bit, of course.

Alternately, a definition list would make more sense semantically, and could be styled appropriately.

Instead, add your pictures after each bit of text describing them, float them left, and give the paragraphs for that post a clear:left style. That should line them up nicely. Might need to fiddle with it a bit, of course.

Okay Otto42, that gave me a lot more to go with. Thank you! I’m sure that moshu meant well, but I’m a little thick when it comes to these things, and it has to be “dumbed down” a bit more for me. I tried what I think you meant by floating left by using the viz editor and selecting the pic, then giving it a left alignment attribute. If you meant to use html instead, it went over my head (again). However, when I tried it, I didn’t have a whole lot of success, and I don’t know enough about .css to know where to put the clear:left style in for the text, nor do I understand exactly what it does, even after reading up on it on the web. Again, it’s a little over my head… I would need more detailed instructions, like where to put the code, in the page or in a .css file, and if in a .css file, how does one “call it up.” Do I use those {} or #, is it a temporary code to supercede the css?

I investigated the definition list. That was a new one on me, and it seems to be working better, although the viz editor does still add the odd spacer html. If you look at the code, you will find several spacer codes, I put several in myself to keep the pictures from bunching up on each other if the text was short.

Now that my code for that page is in better practice, can you let me know how to do this page without the terrifying tables:
https://damariscarbaugh.com/wp/store/cd-store/

It has three columns, unordered lists, links to MP3 clips, and links to a shopping cart. The definition list seems to be a two column bit, and wouldn’t lend itself to this. Again, the table served me well here, but I am open to better code practices.
Thanks again. rcarbaugh

Should we offer a reward for anyone to find a fix to that silly <br class=”spacer_” /> problem?

I dont use tables and don’t switch between modes, but i have to use rich editor as i use bulleted list of things.
Rich editor just inserts extra few ‘<br class=”spacer_” />’ thingies whenever it feels and the whole post looks progressively uglier, until I try to manually kill these bugs, only to have them reappear again.

Anyone who has *real knowledge* of this cause could offer *real solution* please?

Gleb

i agree that the wordpress visual editor and html editor are quite clunky although I do like certain aspects of them.

In particular, placing images in your post and having them go where you want can be an annoying task. I just recently encountered the problem with the “spacer_”, even when I’m using html view only.

the thing I like about wordpress is that it seems to be continually evolving so i’m sure that all the wysiwyg faults and text-editor problems that currently exist on wordpress will be slowly improved.

Solved!
The culprit was not wordpress, but Tiny MCE Advanced plugin:
https://www.laptoptips.ca/projects/tinymce-advanced/

It is great plugin but doing a bit too much filtering.
So to solve it:
1. find file: tadv_replace.js (inside plugin sources)
2. In this file find function: pre_format : function(c)
3. Render it harmless by inserting this line of code to be the first executed:
return tinymce.trim(c);

Save and replace this file inside your wordpress tree.

Gleb

There’s an easier way to do that: just uncheck the “Keep empty paragraphs…” checkbox in the advanced options section on the plugin’s admin page… It is not checked by default, so at some point you must have turned it on.

As you probably know empty <p> tags are not rendered by the browsers (and also removed by autop), so when this option is enabled, all empty paragraphs are padded with <br class="spacer_" />.

Unfortunately in this release (3.2) of the plugin I can’t find the “Keep empty paragraphs..” checkbox.

The possibly similar checkbox that does exist is the “Stop removing the <p> and…” option. Turning this off does stop the problem, but also loses that functionality.

Ironically the only reason I use TinMCE advanced is for this functionality – so I can write br and <p> tags in the HTML editor as I see fit.

So back to the drawing board…