Code for anchors changes after it's entered

[NBC]

Here’s what I type:

<a name="The Anchor"><highlight-text><h3>The Anchor</h3></highlight-text></a>

Here’s what I see when I load the page in a separate browser tab and view the source code (this is in Firefox):

<a name="The Anchor"><highlight-text><br />
<h3>The Anchor</h3>
<p></highlight-text></a><br />

How do I stop these unwanted additions? Those <br />s add a large amount of white space above and below what’s supposed to be a section title. I’m jumping to sections on a page from custom menu items.

BTW, switching from “Text” to “Visual” view of the page I’m editing broke the page content completely.

• This topic was modified 8 years, 3 months ago by NBC.

[Tom]

Hi there,

The WP editor can act strange sometimes when trying to make sure your content is output correctly.

Try adding an HTML comment in between your anchor:

<a name="The Anchor"><! -- anchor --></a>

That should stop the editor from messing with it.

[NBC]

Now instead of

<a name="The Anchor"><highlight-text><h3>The Anchor<! -- anchor --></h3></highlight-text></a>

I have the following:

<p><a name="The Anchor"><highlight-text><br />
<h3>The Anchor<! -- anchor --></h3>
<p></highlight-text></a><br />

Hmm, maybe I don’t need anchors.

[Tom]

Where is the highlight text div coming from? Maybe you have a plugin causing issues?

Are you adding the code using the “Text” tab?

[NBC]

<highlight-text> is custom CSS that adds a highlighter-pen appearance where it’s applied. It’s defined in the style.css file of my child style, as follows:

highlight-text {background-color:#FFFF00;}

I am using the Text editor. I experimented with Visual once, hated it, went back to Text, and hated Visual even more when I saw what it did to my code.

I’m beginning to think I have no alternative but to look for a replacement editor. After looking for an hour at alternatives, it appears it’ll cost me money to do so. This one looks like the favorite.

[Tom]

Hmm, you shouldn’t have to use another editor at all.

When you open the “Text” tab of your editor, what does the code look like? Is it all messed like when you view the live site?

[NBC]

The only workable solution was to separate the anchor link on a line above the subhead. Otherwise, either the editor added tons of blank space above and below the subhead, or the anchor link jumped to the beginning of the paragraph below the subhead.

<smh>

[Tom]

You can also use an ID in the H3:

<h3 id="my-anchor">Heading</h3>

Then link to #my-anchor

[Author]

Posts