Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chris Roberts 74 posts 106 karma points c-trib
    Feb 15, 2013 @ 12:37
    Chris Roberts
    0

    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

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Feb 15, 2013 @ 14:17
    Dan Diplo
    0

    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?

  • Emily Davis 6 posts 26 karma points
    Feb 15, 2013 @ 15:51
    Emily Davis
    0

    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

  • gary 385 posts 916 karma points
    Feb 15, 2013 @ 16:30
    gary
    0

    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

  • Emily Davis 6 posts 26 karma points
    Feb 15, 2013 @ 16:37
    Emily Davis
    0

    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>

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Feb 15, 2013 @ 16:48
    Dan Diplo
    0

    I'm puzzled, Emily, because I've just tried the same thing in Chrome 24.0.1312.57 and get this:

    <ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three </li>
    </ul>

    Which is what I would expect.

    Have you modified tinyMceConfig.config or anything? Is the site a brand new site or an upgrade?

  • Emily Davis 6 posts 26 karma points
    Feb 15, 2013 @ 17:25
    Emily Davis
    0

    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

  • gary 385 posts 916 karma points
    Feb 15, 2013 @ 17:30
    gary
    0

    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

     

  • Emily Davis 6 posts 26 karma points
    Feb 15, 2013 @ 17:51
    Emily Davis
    0

    Thanks Gary, we'll look into that. 

  • Emily Davis 6 posts 26 karma points
    Feb 18, 2013 @ 16:22
    Emily Davis
    0

    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 :-)

     

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Feb 18, 2013 @ 21:52
    Dan Diplo
    0

    Looks like this has already being reported as a bug:

    http://issues.umbraco.org/issueMobile/U4-1703 ;

  • Emily Davis 6 posts 26 karma points
    Feb 19, 2013 @ 11:21
    Emily Davis
    0

    Ah, that helps. Thanks Dan.

Please Sign in or register to post replies

Write your reply to:

Draft