When I use the WYSIWG indent button on an unordered list it creates an additional <LI>.
Even though the style is set to none and it doesn't display when editing, the additional list item does display on the front end.
I can manually correct the code the indent button created but my authors do not know how. Any way to get around this so authors with no HTML skills can use the indent button?
The WYSIWYG plugin does not insert an extra <LI> tags. HTML Tidy, which you can find at External Tools configuraiton, does some HTML clean-up whenever you save the changes. If you don't want to have this functionality then you can turn it off. However, the indentation without the extra <LI> is not valid HTML in fact. 3.6 and 3.8 families are using indentation plugin based on Web-Browser. The coming new Matrix, 3-10-0RC1 includes a newly written indentation plugin which does things better.
[quote]Even though the style is set to none and it doesn't display when editing, the additional list item does display on the front end.
I can manually correct the code the indent button created but my authors do not know how. Any way to get around this so authors with no HTML skills can use the indent button?[/quote]
If you want to fix manually, you should include both of 'list-style-type: none;' and 'list-style-image: none;' in style attribute to hide the list element.
The weird thing is that our HTML Tidy does this job correctly so that I could not replicate the screenshots at all. Can you tell be which version of HTML Tidy is installed in the server? You can find it by typing the following command in the shell:
$ tidy -v
If we can't fix this with HTML Tidy, turning it off would be the right solution for this problem at the moment. You don't want to teach all these details to your authors, right?
[quote]Can you tell be which version of HTML Tidy is installed in the server? You can find it by typing the following command in the shell:
$ tidy -v[right][post=“9806”]<{POST_SNAPBACK}>[/post][/right][/quote]
We’re running Solaris 10
All “$ tidy -v” returned was “HTML Tidy for Solaris released on 1 July 2005”.
[quote]If we can’t fix this with HTML Tidy, turning it off would be the right solution for this problem at the moment. You don’t want to teach all these details to your authors, right?[right][post=“9806”]<{POST_SNAPBACK}>[/post][/right][/quote]
Yes we don’t want to manually modify code each time but we would like for HTML Tidy to remain on as we have quite a few pages with unordered lists with indentation.
Could be our CSS but I am unsure how to get around it as we want to use an image for our bullet:
#content ul {
list-style: none;
padding:0;
margin:0;
}
#content ul li {
background: url(MySource_Files/i-inline-arrow_home.gif) 0 0 no-repeat;
position: relative;
padding:0;
padding-left:2em;
padding-bottom:0.5em;
margin:0;
}
[quote]If you want to fix manually, you should include both of ‘list-style-type: none;’ and ‘list-style-image: none;’ in style attribute to hide the list element.
[right][post=“9806”]<{POST_SNAPBACK}>[/post][/right][/quote]
It doesn’t fix the problem - the bullet image remains:
The Matrix code is also valid, it's just not pretty. The reason the button won't disappear is because it's a background-image, not a list-style-image, meaning that the list-style-image: none bit that the WYSIWYG puts in isn't going to affect it.
The Matrix code is also valid, it's just not pretty. The reason this is happening is because it's a background image, not a list-style-image, meaning that the list-style-image: none bit that the WYSIWYG puts in isn't going to affect it.
Thanks for your response. I just re-tested, yes the code is valid. Although when viewing the page, it creates unwanted spacing which we would like to avoid. See attached screenshot. codexam.jpg (8.59 KB)
Looks like the real issue is that the wysiwyg isn't nesting the second-level UL inside the previous LI - it's creating a new LI for it and trying to hide it. Because the WYSIWYG is based on native browser features in IE and Mozilla this may be difficult or impossible to change, but somebody like Scott who's worked on this sort of thing recently may be able to advise further.
For anyone who's curious, we have a Cerberus ticket open for this now. I've been playing with variations on CSS to play happily with the unwanted empty list-item.
I agree to Tom's opinion. In fact, the current listing plugin in the WYSIWYG is totally dependant on the browser, i.e. we don't have any control over it. If the both of HTML are valid and CSS can fix the spacing problem, that should be the right solution.
We can attempt to develop a new plugin to override the browser's behaviour, but we don't have the plan for it at the moment.
If anyone is interested a support ticket I opened concluded it is not possible in IE without modifying the code however there is a workaround - still not that user-friendly for your authors but prevents going into the code or turning HTML Tidy off.
Create the following list via the WYSIWYG editor:
one
two
[two carriage returns]
three
four
[two carriage returns]
five
six
turn one and two into a bulleted list
turn five and six into a bulleted list
indent three and four
turn the indented three and four into a bulleted list
remove the extra line breaks on either side of three and four
