Hello,We are using Umbraco 4.11.1 and are experiencing some unwanted behaviour.Whenever we add a bulleted list in the rich text editor, Umbraco appears to be adding some span tags with embedded line-height and font-size styles to each item.Is this a bug? Is there any way to prevent this behaviour as it is breaking the design of our site.Thanks,- Chris
What browser are you using? Because I don't see this behaviour in Chrome. Also, are you creating the list via the bulleted list icon, or are you pasting the code in from elsewhere?
Hi Dan, we're using Chrome and the issue occurs when using the built in bulleted list function in the WYSIWYG. It occurs when building up content manually or copy/pasting each line item from Notepad. Once the extra code starts occuring in the bulleted lists, it then affects headers and body copy below. This then actually affects the content displayed on the published page. It also means you can't edit a hyperlink inserted into the affected content in the Editor view. You have to switch to HTML view to fix it. Thanks, Emily
If you Ctrl+V directly into the rich text editor this occurs, if however you hit the paste icon a pop-up display opens, if you then Ctrl+V into that - no addtional tags are added.
Experienced this when adding a lot of copied content which was adding blank <p> tags before and after, then a span tag around the pasted text, but I can confirm that the paste button becomes useful in this scenario. Have copied text into the editor then hit the bullet button and it changes to <ul><li> as you would expect.
Hi Gary, thanks for the suggestion but this issue still occurs even when using the Paste from option. The only way I have found to avoid it, is to build up the bulleted list manually in the HTML view. I just tried it again to generate an example:
Hi Dan, it's a brand new site (and we've noticed it with another brand new one too). We've not modified the config for the Rich Editor either. Note that this is also happening even when manually building up a bulleted list in the Editor (so without any copy/paste action). Any further ideas? Thanks
Agree with Dan - have tried other browsers, same thing.
The fact that you are introducing css at that point to get it to works says that there is an issue in the css file to do with the <li>, in other words you are over-riding something. This may be 2 issues rolled into one, but in theory if the ul, li exists inside a span tag, it would still pick up the css from the stylesheet (may just have some margin issues), so would go there for a solution.
We found that if we have a related stylesheet associated with a Rich Text Editor, this seems to cause the unwanted inline styles.
So, we have turned off the editor from the CSS and it's fixed the issue.
However, we did like that we could pick up the CSS in the WYSIWYG to match the style of the site, but don't understand why Umbraco is then putting in additional styles which don't relate to our CSS.
Would be nice not to have to disable this feature to fix it.
Unwanted styling being added to bulleted lists
Hello,We are using Umbraco 4.11.1 and are experiencing some unwanted behaviour.Whenever we add a bulleted list in the rich text editor, Umbraco appears to be adding some span tags with embedded line-height and font-size styles to each item.Is this a bug? Is there any way to prevent this behaviour as it is breaking the design of our site.Thanks,- Chris
What browser are you using? Because I don't see this behaviour in Chrome. Also, are you creating the list via the bulleted list icon, or are you pasting the code in from elsewhere?
Hi Dan, we're using Chrome and the issue occurs when using the built in bulleted list function in the WYSIWYG. It occurs when building up content manually or copy/pasting each line item from Notepad. Once the extra code starts occuring in the bulleted lists, it then affects headers and body copy below. This then actually affects the content displayed on the published page. It also means you can't edit a hyperlink inserted into the affected content in the Editor view. You have to switch to HTML view to fix it. Thanks, Emily
Hi Emily
If you Ctrl+V directly into the rich text editor this occurs, if however you hit the paste icon a pop-up display opens, if you then Ctrl+V into that - no addtional tags are added.
Experienced this when adding a lot of copied content which was adding blank <p> tags before and after, then a span tag around the pasted text, but I can confirm that the paste button becomes useful in this scenario. Have copied text into the editor then hit the bullet button and it changes to <ul><li> as you would expect.
Hope this helps
Gary
Hi Gary, thanks for the suggestion but this issue still occurs even when using the Paste from option. The only way I have found to avoid it, is to build up the bulleted list manually in the HTML view. I just tried it again to generate an example:
<div>
<ul>
<li><span style="font-size: 10px; line-height: 1;">Line item 1</span></li>
<li><span style="font-size: 10px; line-height: 1;">Line item 2</span></li>
<li><span style="font-size: 10px; line-height: 1;">Line item 3</span></li>
<li><span style="font-size: 10px; line-height: 1;">Line item 4</span></li>
</ul>
</div>
I'm puzzled, Emily, because I've just tried the same thing in Chrome 24.0.1312.57 and get this:
Which is what I would expect.
Have you modified tinyMceConfig.config or anything? Is the site a brand new site or an upgrade?
Hi Dan, it's a brand new site (and we've noticed it with another brand new one too). We've not modified the config for the Rich Editor either. Note that this is also happening even when manually building up a bulleted list in the Editor (so without any copy/paste action). Any further ideas? Thanks
Agree with Dan - have tried other browsers, same thing.
The fact that you are introducing css at that point to get it to works says that there is an issue in the css file to do with the <li>, in other words you are over-riding something. This may be 2 issues rolled into one, but in theory if the ul, li exists inside a span tag, it would still pick up the css from the stylesheet (may just have some margin issues), so would go there for a solution.
Hope this helps
G
Thanks Gary, we'll look into that.
We found that if we have a related stylesheet associated with a Rich Text Editor, this seems to cause the unwanted inline styles.
So, we have turned off the editor from the CSS and it's fixed the issue.
However, we did like that we could pick up the CSS in the WYSIWYG to match the style of the site, but don't understand why Umbraco is then putting in additional styles which don't relate to our CSS.
Would be nice not to have to disable this feature to fix it.
Thanks :-)
Looks like this has already being reported as a bug:
http://issues.umbraco.org/issueMobile/U4-1703 ;
Ah, that helps. Thanks Dan.
is working on a reply...