Unordered lists nested within ordered lists display correctly in editor but not on the real page. [#2108591]

Have been struggling with this issue for some time with no progress. We noticed it after we upgraded from 6.28 to 7.23. Whenever an unordered list is nested within an ordered list the nested unordered list seems to "stop" the ordered list completly causing the rest of the ordered list items (which are outside the inner nested unordered list) to appear as unordered items. However, they display correctly when viewing the page in the editor. It is only on the real page that the end users view does this error display. See the attached "real_page.jpg" and "editor.jpg" for an example of this error.

At first I thought it was an issue with our custom theme, however I was able to reproduce the same error on the default Bartnik and Garland themes.

Any help would be greatly appreciated. Please let me know of any additional information I could provide. Thanks.

Comment	File	Size	Author
#5	extra_numbering.jpg	6.19 KB	kmyers42
	editor.jpg	69.7 KB	kmyers42
	real_page.jpg	60.69 KB	kmyers42

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

rocketeerbkw CreditAttribution: rocketeerbkw commented 17 October 2013 at 17:51

Can you post the actual HTML for the editor and the page (just the small section of the page that's wrong)? It might be an input filter problem.

Also, what version of tinymce?

Comment #2

kmyers42 CreditAttribution: kmyers42 commented 18 October 2013 at 16:38

Thanks for the reply,

I'm using TinyMCE 3.4.6

Here is some sample HTML showing the problem:

HTML from the editor: (I used the plain text view to get this)

<ol style="padding-left: 30px;"><ol style="padding-left: 30px;">
<li style="padding: 0.5em;">test1</li>
<ul>
<li style="padding: 0.5em;">Java</li>
<li style="padding: 0.5em;">C/C++</li>
<li style="padding: 0.5em;">JSP</li>
<li style="padding: 0.5em;">Cobol</li>
<li style="padding: 0.5em;">Perl</li>
<li style="padding: 0.5em;">etc.</li>
</ul>
<li style="padding: 0.5em;">test2</li>
<li style="padding: 0.5em;">test3</li>
</ol>

But on the real page, this is the html (I used firebug to get this):

<ol style="padding-left: 30px;">
<li style="padding: 0.5em;">test1</li>
</ol>
<ul>
<li style="padding: 0.5em;">Java</li>
<li style="padding: 0.5em;">C/C++</li>
<li style="padding: 0.5em;">JSP</li>
<li style="padding: 0.5em;">Cobol</li>
<li style="padding: 0.5em;">Perl</li>
<li style="padding: 0.5em;">etc.</li>
</ul>
<li style="padding: 0.5em;">test2</li>
<li style="padding: 0.5em;">test3</li>

As you can see, for some reason the <ol> section is getting cut off early in the HTML of the real page. No idea why that is happenig or how to fix. Any help would be appreciated. Thanks.

Comment #3

rocketeerbkw CreditAttribution: rocketeerbkw commented 18 October 2013 at 22:30

I'm not sure of the cause, but I think your problem is you have two <ol style="padding-left: 30px;"> on the first line (and only one </ol> at the end).

One of the input filters tries to correct faulty HTML, and what you pasted looks like what I'd expect that filter to output. Because you have two opening tags, and one closing tag, it's trying to guess what is correct and showing up wrong.

Delete the extra <ol style="padding-left: 30px;"> manually (you can click "Disable rick-text" to do this) and see if that fixes your problem.

Comment #4

TwoD

Swedish

Sweden

CreditAttribution: TwoD commented 19 October 2013 at 10:39

Status:

Active

» Closed (works as designed)

You should put the nested list inside an <li></li> tag in the parent list. I don't know why it appears to work in the editor, but it's apparently confusing the serverside filters (which are completely independent from the editor).
The filter probably thinks you forgot to close the ordered list before creating the unordered list, so it inserts a closing tag.
Then it finds orphan list item tags and leaves them alone instead of guessing whether they belong to an ordered or unordered list. Finally it encounters the original [empty] closing ordered list tag and removes it, since list tags are not self-closing and are of no use empty.
The editor uses its own parser and serializer, which likely treats nested lists without an li tag as a common mistake and corrects it while in WYSIWYG mode. What's a bit strange is that the serializer then outputs the list without fixing it permanently, but that would be a TinyMCE issue.

This is just a guess I made without looking at the implementation, but I think it would make sense.

See http://stackoverflow.com/questions/5899337/proper-way-to-make-html-neste... for reference.'

Comment #5

kmyers42 CreditAttribution: kmyers42 commented 21 October 2013 at 17:03

File	Size
extra_numbering.jpg	6.19 KB

Thanks TwoD, your solution definitly helps and this is closer to being fixed but is not quite 100% yet. The nested list is now displaying correctly after surrounding it with <li> tags but now that nested list is being labled with a number. See attachment "extra_numbering.jpg".

I understand why it is being labled as such but is there any HTML trick to remove that extra numbering and just have the nested list? (Like as in the attachment editor.jpeg on the original post)

My code now looks like:

<ol style="padding-left: 30px;"><ol style="padding-left: 30px;">
<li style="padding: 0.5em;">test1</li>
<li>
<ul>
<li style="padding: 0.5em;">Java</li>
<li style="padding: 0.5em;">C/C++</li>
<li style="padding: 0.5em;">JSP</li>
<li style="padding: 0.5em;">Cobol</li>
<li style="padding: 0.5em;">Perl</li>
<li style="padding: 0.5em;">etc.</li>
</ul>
</li>
<li style="padding: 0.5em;">test2</li>
<li style="padding: 0.5em;">test3</li>
</ol>

Thanks.

Comment #6

kmyers42 CreditAttribution: kmyers42 commented 21 October 2013 at 17:04

#3 rocketeerbkw

Thanks but unfortunatly that didn't work for me. Still had the same results as before.

Comment #7

kmyers42 CreditAttribution: kmyers42 commented 21 October 2013 at 17:25

Never mind, I have it fixed now. I realized I could get rid of the extra numbering by moving the ending <li> tag from the first item and putting it at the after (outside) of the nested unordered list, such as:

<ol style="padding-left: 30px;"><ol style="padding-left: 30px;">
<li style="padding: 0.5em;">test1
<ul>
<li style="padding: 0.5em;">Java</li>
<li style="padding: 0.5em;">C/C++</li>
<li style="padding: 0.5em;">JSP</li>
<li style="padding: 0.5em;">Cobol</li>
<li style="padding: 0.5em;">Perl</li>
<li style="padding: 0.5em;">etc.</li>
</ul>
</li>
<li style="padding: 0.5em;">test2</li>
<li style="padding: 0.5em;">test3</li>
</ol>

Thanks very much for the help all. It is much appreciated.

Comment #8

kmyers42 CreditAttribution: kmyers42 commented 23 October 2013 at 19:17

We actually found a better solution that fixes all of our nested list problems automatically. Can't gaurentee it will work in all scenarios but it turned out to be the solution we went with.

Under admin/config/content/formats click "Configure" for "Full HTML". On that config page, uncheck the box labled "Correct faulty and chopped off HTML". That did the trick for us.