Hi Guys,
in my latest Projekt I used the newest _XH-Version of CMSimple.
Now I got a strange problem, concerning the unordered list display in the editor window: When I activate the unordered list-Button, nothing happens in the editor-window > no bulletpoints, etc. are displayed, but when I klick on "preview", the bulletpoints get displayed properly? It's a little bit annoying because as an editor you can't really tell if there are bulletpoints or not, you have to switch permanently while editing your site.
Does anyone know of this problem and have a solution to it?
Here is a screenshot of that mess: http://imageshack.us/f/256/tinymce.jpg/
Thanks for your support!
Robert
TinyMCE and <li> unordered list problem!
Re: TinyMCE and <li> unordered list problem!
Hi Robert,
an image says nothing, what we need is a link to your website, because it seems to be a template related problem (CSS).
Try if it also happens with the standard tempate,
Gert
an image says nothing, what we need is a link to your website, because it seems to be a template related problem (CSS).
Try if it also happens with the standard tempate,
Gert
Re: TinyMCE and <li> unordered list problem!
Hi Robert,
some part of the styling seems to be missing in the edit view. If I look at the screenshots, not only the bullets are missing, but the list is not indented to the right.
tinyMCE includes the template's stylesheet by default (stylesheet.css), but it doesn't use additional stylesheets linked in the <head> of the template. So if you have additional stylesheets linked in the template, you have to declare them to tinyMCE. In plugins/tinymce/inits/init_full.js you'll find:
You can add additional stylesheets there (separated by comma), e.g.
Christoph
some part of the styling seems to be missing in the edit view. If I look at the screenshots, not only the bullets are missing, but the list is not indented to the right.
tinyMCE includes the template's stylesheet by default (stylesheet.css), but it doesn't use additional stylesheets linked in the <head> of the template. So if you have additional stylesheets linked in the template, you have to declare them to tinyMCE. In plugins/tinymce/inits/init_full.js you'll find:
Code: Select all
content_css : "%STYLESHEET%",Code: Select all
content_css : "%STYLESHEET%, ./templates/my_template/stylesheet2.css",Christoph M. Becker – Plugins for CMSimple_XH
Re: TinyMCE and <li> unordered list problem!
@Gert
Thanks for the quick answer! You're right, a link is certainly better, but the problem is in the backend, so you would't see much except I'd give you the password to login. But your tip to try another template helped to realize that actually the problem occurs only in my own template...
@Christoph
Thanks for your tips, I will try out, but I'd be happier if there was another solution! As mentioned above, that problem is unique to my template, so I'd rather change my own template than to mess around with the editor-system-files...
When I know where the problem lies, than I can avoid it in future projects
THANKS SO MUCH!
Thanks for the quick answer! You're right, a link is certainly better, but the problem is in the backend, so you would't see much except I'd give you the password to login. But your tip to try another template helped to realize that actually the problem occurs only in my own template...
@Christoph
Thanks for your tips, I will try out, but I'd be happier if there was another solution! As mentioned above, that problem is unique to my template, so I'd rather change my own template than to mess around with the editor-system-files...
When I know where the problem lies, than I can avoid it in future projects
THANKS SO MUCH!
Last edited by smik on Wed Jul 11, 2012 2:42 pm, edited 1 time in total.
Re: TinyMCE and <li> unordered list problem!
Hi Robert,
thanks for the link -- I guess there's no need to log in. The problem: the styling of the list is done in the template's stylesheet line 95ff:
But tinyMCE, which runs in an IFrame, doesn't have a <div id="content">, so it ignores these styles. And in the template's stylesheet line 2:
takes away the padding and margin of the all <ul>'s, so even the bullets can't be seen.
Similar differences between edit and view mode will show up for <a>'s (and all styles that are only defined for #content).
A simple solution: don't restrict the definitions of <ul>,<li>,<a> etc. to #content. If you need to style these differently in other parts of the template, you can do so by restricting them to the surrounding elements.
A cleaner solution would be to have an editor, that's not embedded in an IFrame. Unfortunately none of the good editors are implemented with contentEditable yet.
Christoph
thanks for the link -- I guess there's no need to log in. The problem: the styling of the list is done in the template's stylesheet line 95ff:
Code: Select all
#content ul{margin-left:50px;}
#content li{
list-style-position: inside;
list-style-image: url(images/bullet2.png);
line-height: 20px;
}Code: Select all
* {padding: 0; margin: 0;}Similar differences between edit and view mode will show up for <a>'s (and all styles that are only defined for #content).
A simple solution: don't restrict the definitions of <ul>,<li>,<a> etc. to #content. If you need to style these differently in other parts of the template, you can do so by restricting them to the surrounding elements.
A cleaner solution would be to have an editor, that's not embedded in an IFrame. Unfortunately none of the good editors are implemented with contentEditable yet.
Christoph
Christoph M. Becker – Plugins for CMSimple_XH
Re: TinyMCE and <li> unordered list problem!
Wow, thanks Christoph for the excellent explanation of where the problem lies!
I'd never come across that idea > mainly because I'm not a real coder but a worse autodidactic
Now I'll try to change things according to your hints!
Best regards from Stuttgart,
Robert
I'd never come across that idea > mainly because I'm not a real coder but a worse autodidactic
Now I'll try to change things according to your hints!
Best regards from Stuttgart,
Robert