Need help? Check out our Support site, then


WordPress.com Forums » Support

Editor adds unexpected html code

  1. hopekc
    Member

    When I code an

      with embedded
    1. the editor adds extra
      pairs that messes up my code. I will show several examples that show what I mean.

      Example of extra code the editor places in the page (note the extra pairs of

        ...
      :
      <p></p>
      <h2>List of events</h2>

      1. January 03, 2007 — Rituxan Treatment Three
      2. January 10, 2007 — Rituxan Treatment Four
      3. January 17, 2007 — Results of four Rituxan Treatments

      <hr />

      1. January 03, 2007 — Rituxan Treatment Three

    Short example of my code (which works fine until after I save it):
    <h1>This is my heading</h1>
    Some text to introduce the topic
    <hr />


    <h2>List of events</h2>

    1. item one
    2. items two
    3. item three

    <hr />

    1. item one

      2. <p>paragraph of text that goes with item one.</p>

      <hr />
      «List of Events»
      <hr />

    2. item two

      3. <p>paragraph of text that goes with item two.</p>

      <hr />
      «List of Events»
      <hr />

    3. item three

      4. <p>paragraph of text that goes with item three.</p>

      <hr />
      «List of Events»
      <hr />

    An example page that shows what I get after I save the code:
    http://hopekc.wordpress.com/journals/2007-2/2007-january/

    Note: I have re-codded the pages I have this problem with several times to fix them and if I open the editor again it seems to consistently generate this problem again.

    Does anyone have any idea what is wrong?

    Thanking you in advance! Daryl

    The blog I need help with is hopekc.wordpress.com.

  2. justpi
    Member

    1. To display code correctly here, you need to enclose it in backticks (see note on "Allowed markup").
    2. You don't need to reproduce the code of a published page: we can see it by viewing the sourcecode of the page.
    3. I tried this in my test blog and I'm unable to reproduce the issue.
    4. In the page you linked to, the issue shows up only on single item lists: what's the point of coding a single item as an ordered list?

  3. hopekc
    Member

    Thank you!

    I'm not sure I am following all of your points - let me attempt to clarify things.

    1: I didn't understand I needed to use the special character to isolate the code. I have attempted to use the backtick character (see below)

    2: I was attempting to show what I was dealing with - before, during, and after the fact to make it clear.

    3: The sample code I provided is too short to jump back and forth between the lists so you probably wouldn't have been able to see it function. However, the sample page I included shows the navigation method at use on the page - just incorrect text at the target location.

    4: Think of this as a table of contents that shows a subject. Then, when someone clicks on the link within the table of contents, it jumps on that page to the text that is identified. I also provide a way to get back to the list or the top of the page.

    E.g. The variables as I understand it is the table of contents <a href=\"#i1\"> and the target on the webpage is <a name=\"i1\">.

    I am using this method to keep lengthy journal entries for any given month together on a single webpage as illustrated by the link I provided. Also, if you notice the table of contents shows the numbers and the text is always indented incorrectly with an "A." leading as the title of the paragraph.

    The following link provides:
    a.) Navigation between the table of contents and the paragraph it is supposed to jump to.

    b.) The correct numbering system that matches both the table of contents and the paragraph being jumped to.

    http://hopekc.wordpress.com/journals/2007-2/2007-february/

    I hope this code works with the backtick characters.

    <h1>This is my heading</h1>
    Some text to introduce the topic
    <hr />

    <a name=\"list\"></a>
    <h2>List of events</h2>
    <ol>
    <li><a href=\"#i1\">item one</a></li>
    <li><a href=\"#i2\">items two</a></li>
    <li><a href=\"#i3\">item three</a></li> </ol>

    <hr />

    <ol>
    <li><a name=\"i1\"></a><strong>item one</strong></li> <p>paragraph of text that goes with item one.</p>

    <hr />
    «<a href=\"#list\">List of Events</a>»
    <hr />
    <li><a name=\"i2\"></a><strong>item two</strong></li>
    <p>paragraph of text that goes with item two.</p>

    <hr />
    «<a href=\"#list\">List of Events</a>»
    <hr />

    <li><a name=\"i3\"></a><strong>item two</strong></li>
    <p>paragraph of text that goes with item two.</p>
    <p>paragraph of text that goes with item three.</p>

    <hr />
    «<a href=\"#list\">List of Events</a>»
    <hr />
    </ol>

    Thank you for your help! Daryl

  4. justpi
    Member

    You're welcome.
    I don't see why you're copypasting all this: as I said, I can see the actual code of your page. Anyway, in the February page you've got this:

    <ol>
<li><a name="i1">ETC</li>
ETC ETC ETC
<li><a name="i2">ETC</li>
ETC ETC ETC
<li><a name="i3">ETC</li>
ETC ETC ETC
</ol>

    The problem in the January page is that you've turned each li item into a separate ordered list inside an ordered list:

    <ol>
<ol>
<li><a name=ETC</li>
</ol>
</ol>

    That's what's causing the indentation and the wrong "A" letter. You need to edit the page, remove all the opening and closing ol tags around each li item, and just use an opening ol tag before the first li item and a closing ol tag after the third text, as in the February page.

  5. hopekc
    Member

    Thank you....

    You have identified my problem, which happens "After" I code a webpage correctly.

    After many hours of working on this problem (recoding everything and saving it) when I go back into that webpage the code is changed to the code you have entered above.

    I would like to understand why the editor seems to do this everytime I fix a webpage. I have spent many hours fixing the code because I was concerned I was doing something wrong.

    Thank you for explaining how the backtick character works. This is the first time I have attempted to use this forum to get help. - Daryl

  6. justpi
    Member

    In my first reply I said I couldn't reproduce the issue. Now I tried better, and I see what you mean. The correction I suggested stays put if you update the page, but changes if you switch the editor to VIsual. That's because when you switch between Text (=code) and Visual or vv, the editor tries to correct mistakes. The mistake is that you add the text etc outside each li pair, so the editor thinks that this list item is a self contained list and closes it. You need to put everything inside the li pair. In other words, instead of this:

    <ol>
<li><a name="i1"></a><strong>HEADING</strong></li>
PARAGRAPHS, LINKS, DIVIDERS
<li><a name="i2"></a><strong>HEADING</strong></li>
PARAGRAPHS, LINKS, DIVIDERS
<li><a name="i3"></a><strong>HEADING</strong></li>
PARAGRAPHS, LINKS, DIVIDERS
</ol>

    you need this:

    <ol>
<li><a name="i1"></a><strong>HEADING</strong>
PARAGRAPHS, LINKS, DIVIDERS</li>
<li><a name="i2"></a><strong>HEADING</strong>
PARAGRAPHS, LINKS, DIVIDERS</li>
<li><a name="i3"></a><strong>HEADING</strong>
PARAGRAPHS, LINKS, DIVIDERS</li>
</ol>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.