+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Html Editor adds span tag with line height

Html Editor adds span tag with line height

13 posts, 0 answered
  1. Conrad Ehinger
    Conrad Ehinger avatar
    59 posts
    Registered:
    22 Sep 2009
    07 Oct 2011
    Link to this post
    In Sitefinity 4.2 SP1 -

    If I go into a page, add a content block, and create an unordered (bulleted) list, I get this kind of output:

    <ul>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    </ul>

    Why is there a span tag, and why is there a line height attribute? This wasn't copy/pasted - it was manually created.

    Thanks,

    Chris
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    08 Oct 2011
    Link to this post
    Hey Conrad,

    I recently ran into that aswell, it's because you have line-height mis-match somewhere in your regular css compared to the selected style/class. Easiest way to find it is to use firebug and to trace back the applied style to the one beneath it...

    Jochem.
  3. Conrad Ehinger
    Conrad Ehinger avatar
    59 posts
    Registered:
    22 Sep 2009
    11 Oct 2011
    Link to this post
    Excuse me? This is a brand new sitefinity installation and I haven't edited the editor CSS at all. I don't think you are following me. The span tags are being added to the HTML in the editor.

    Please don't close this post - the response was definitely not the answer.
  4. Conrad Ehinger
    Conrad Ehinger avatar
    59 posts
    Registered:
    22 Sep 2009
    11 Oct 2011
    Link to this post
    Screenshots attached. I dragged over a content block, clicked the bulleted list icon, and started creating list items.
  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    11 Oct 2011
    Link to this post
    You're correct, I'm not following you, can't see a twitter or google+ link on your profile :)

    What I merely was trying to say, clean out of the box (new proj fresh from the project manager with the standard theme an no alterations what so ever) it doesn't add line-height spans to your <li>.

    (And just to be stuborn I just fired up new projects on 4.2.1650 and 4.2.1733)

    The problem I had was with my theme, (the regular css or reset.css, not the editor css) where I messed up the line-heights between normal text and list items. This caused the Radeditor to change the text from ('normal' with the appropiate line-height) to <li> (with its appropiate line-height).

    5 minutes with firebug showed me where my error was and after correcting it, when transforming text to a list in the editor no longer caused the spans to be added to my li tags.
  6. Conrad Ehinger
    Conrad Ehinger avatar
    59 posts
    Registered:
    22 Sep 2009
    12 Oct 2011
    Link to this post
    Are you typing manually into the HtmlEditor or Copy/Paste content from your site into the editor?
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Oct 2011
    Link to this post
    Hey Conrad,

    In the last 2 test cases I did to double check I manually typed.

    Not 100% whether I typed or copy-pasted text while running into the issue last week, I hadn't noticed the span tags till after I finished added content to the pages.

    J.
  8. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    01 Mar 2013 in reply to Jochem Bökkers
    Link to this post

    Jochem,

    Can you expand more on what exactly you needed to do.  I am running into this issue and for the most part it does not appear to affect my layout in a noticeable way...yet, but I would prefer to keep the extra span tags from being injected.

    As a frame of reference I am using normalize.css first and then have a full range of typography base styles that have line-heights set on them.  

    I also have a editor css file.  When you were talking about a mis-match I am assuming you meant that you had one value in editor.css and yet another value for the same element in the theme.css?

    I have exactly copied the element over to the editor.css file, but what I am finding is that anytime I use RadEditor to align something or hit ctrl+enter to begin a new paragraph that a <span line-height:1.5> is being injected.

    Now most of my elements are using 1.6 line-height so like I said, it is barely noticeable.

  9. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    01 Mar 2013 in reply to Stacey
    Link to this post

    I tested the following scenario on another site that I have not set a separate editor css file and get the same issue.

    1.) Just type any text...."test"

    2.) Enable the advanced formatting and then select the text and click to align center.

    I get the following result:

    <div style="text-align: center;"><span style="line-height: 1.5;">test</span></div>

    I played around more on the site where I do have a editor.css file setup and I am able to get it to pickup the values for line-height that I assign to the body element, but I do not want it adding these extra tags period.

    I understand the editor is trying to setup consistent line-height so if users do not select paragraph tags or heading that they will not look wonky, but I am taking care of all this in my theme style sheets and do not need the editor making life miserable for me.

    I tried 

    body { } /*This one just defaults back to <span style="line-height:1.5">*/
    body { line-height: inherit } /*This one just defaults back to <span style="line-height:inherit>  WHICH MAY BE MY BEST OPTION?*/
     
    body { line-height: any value } /*This picks up the value <span style="line-height:value">/*
     

     

    body { line-height: normal } /*This just adds <span style="line-height:normal">*/

     

     

  10. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    01 Mar 2013 in reply to Stacey
    Link to this post

    I noticed acactely the same today on 5.4 .4010

    <ul>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    <li><span style="line-height:15px;">My text</span></li>
    </ul>

    I thought it was because I was moving stuff from an old site.

    I removed it manually.

    Makus

  11. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    01 Mar 2013 in reply to Markus
    Link to this post

    Yeah, I can remove it as well, but I cannot expect my clients to do this.  I had a client last week having table formatting issues because this same thing somehow wrapped itself around one table, but not the others.

  12. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    01 Mar 2013 in reply to Stacey
    Link to this post

    @Stacy

    I think it happens when you define a regular style that's not wrapped inside the page wrapper.

    It's similar to when you do for instance 

    h2{font-family:cursive!important;} 

    and you go to Page Edit and you see the 'Drag widgets' style being deformed.

    By default .RadDock .rdContent has a font-size of 12px and line-height of 17px somewhere on your reset you've probably set normal font-size to be larger say 14px and/or line-height as well. 

    The .sfPageContainer .RadDock_Sitefinity .rdContent causes line-height:inherit!important; to translate that into a correction factor of 1.5.

    Jochem

  13. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    01 Mar 2013 in reply to Jochem Bökkers
    Link to this post

    More than likely that is what is happening based on my testing.  I am, however wrapping all my main element styles to keep from conflicting with Sitefinity.  I use an id #Page-Wrapper <elem>. The exception to this is the body element where I have a baseline default/reset in which case all this fun begins.

    For instance:

    1.) I typed out "Test"

    2.) Selected it and made it bold.

    3.) Then selected for it to align center....No extra span tag because I have <strong> and <b> set with line-height: inherit in my theme.css.

    What is interesting is that I do not have <strong> or <b> in my editor.css so I would expect it to also inject the span tag with line-height.  I previously did not have a body element declared in my editor.css and it DID inject span tags.  For now I have just kept the body line-height set to inherit in my editor.css. 

13 posts, 0 answered