This is a migrated thread and some comments may be shown as answers.

RadEditor text color issue

1 Answer 112 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 08 Apr 2015, 09:01 AM

Hello guys,I have a problem with a text color in radEditor. Setting an html to radEditor content on code behind, on UI a part of the text appears in color green despite the fact that no green color is reffered in style, there is only "color:inherit" for a span.  

It is easy to reproduce. Here is the test case for you :          

<telerik:RadEditor ID="txtNotes" runat="server" EditModes="Design" Width="900px" BorderWidth="1"
                Height="420px" ContentAreaMode="Div"
                NewLineMode="Br" EnableTrackChanges="false" StripFormattingOnPaste="NoneSupressCleanMessage">
                <ExportSettings OpenInNewWindow="true">
                </ExportSettings>
            </telerik:RadEditor>

I attached a pict with the resulting UI . Bellow you have  the html code. The only modification we are doing is that we are extracting the body content from html  and set it to radEditor like this :txtNotes.Content = bodyText from file ;

 

HTML CODE FOR RADEDITOR: 

?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD>  <STYLE type=text/css> P, UL, OL, DL, DIR, MENU,  PRE { margin: 0 auto;}</STYLE>    <META name=GENERATOR  content="MSHTML 8.00.6001.19298"></HEAD>   <BODY leftMargin=1 rightMargin=1 topMargin=1><strong><em>02/25-<span style="color: inherit; line-height: 1;">Any new developments on this I-Lead? There has got to be a
way we can secure this business with all that activity in Sunnyvale and the
relationships we have.</span></em></strong>
<p class="MsoNormal"><strong><em></em></strong></p>
<p class="MsoNormal"><strong><em>Let&rsquo;s work together to make this happen at the right rate
and stay pattern!!!</em></strong></p></BODY></HTML>

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 08 Apr 2015, 12:31 PM

Hi Christian,

I feel obliged to start with noting that it is always recommended to use valid XHTML, while the provided snippet is invalid. You can use a tool like this for validation: http://validator.w3.org/.

As for the green color - the issue stems from the fact browsers color a font tag with an "inherit" color like this:

<font color="inherit">lorem ipsum.</font>

I am attaching a screenshot that illustrates this. It seems browsers interpret the word "inherit" as a color name.

This affects you because the editor works with font elements, so the span tag becomes a font element when it has a color applied.

The easiest workarounds I can offer are:

  • remove the color: inherit rule from the original HTML if possible
  • OR, add the following CSS rule to your page to prevent this browser behavior:

    font[color="inherit"]
    {
        color: black;
    }


Regards,

Marin Bratanov
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Editor
Asked by
Christian
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or