Html Editor adds span tag with line height

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

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.

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.

Screenshots attached. I dragged over a content block, clicked the bulleted list icon, and started creating list items.

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.

Are you typing manually into the HtmlEditor or Copy/Paste content from your site into the editor?

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.

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.

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 

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

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.

@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 

h2font-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

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. 

I am typing some content and formatting that after same content copy and paste in another kendo editor it's adding some extra empty tags . I want to check duplicate with formatted content . Can you help me some one

Thanks,

Tamilselvan