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

Problem with font size display in IE with RadEditor

2 Answers 191 Views

Editor

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

Clyde asked on 17 Jul 2008, 10:18 PM

Someone needs to ban the use of IE from the internet, but until that happens, perhaps someone could help me with a workaround for this little issue.

When working in IE in the RadEditor, all H1, H2, body text is larger in RadEditor than displayed on the page. This is confusing to my clients as the font size differs from when they input in the Editor and when it displays on the page. This problem does not exist in Firefox, everything seems to work fine there.

Here is some test code.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CSSTest.aspx.cs" Inherits="test_CSSTest" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
                    <style type="text/css">  
        
                        .h1  
        
                        {  
        
                          color: #FFFFFF;  
        
                          font-family: Arial;  
        
                          background-color: #FF9900;  
        
                          font-size: large;  
        
                          font-weight: bold;  
        
                        }  
        
                        h1  
        
                        {  
        
                          color: #FFFFFF;  
        
                          font-family: Arial;  
        
                          background-color: #FF9900;  
        
                          font-size: large;  
        
                          font-weight: bold;  
        
                        }  
        
                        body  
        
                        {  
        
                            font-size:medium;  
        
                        }  
        
                    </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"   
        
                    OutputCompression="AutoDetect">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                <h1>This is a header test</h1> 
        
                <br /> 
        
                <div class = "h1">This is a header test</div> 
        
                <br /> 
        
                This is just body text  
        
                <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Default"   
        
                    ToolProviderID="" ToolsWidth="">  
        
                    <Content> 
        
                        <div> 
        
                        <h1>This is a header test</h1> 
        
                        <br /> 
        
                        <div class = "h1">This is a header test</div> 
        
                        <br /> 
        
                        This is just body text  
        
                        </div> 
        
                    </Content> 
        
                </telerik:RadEditor> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

You will see when you run this under IE, that the size displayed within the Editor is larger that what is displayed on the page.

Anyone know how to solve this?

Thanks
Clyde

2 Answers, 1 is accepted

answered on 18 Jul 2008, 12:23 PM

Hi Clyde,

By default, RadEditor copies the styles from the parent page in which it resides in order to format its content in the same way as the content looks on the page. In some scenarios this is not convenient for the end-user because the editor's background and text colors can appear unreadable, in such cases you should set the CssFiles property to point to an external css file and manually specify the classes that you want to load in the editor. By setting the CssFiles property you will prevent the editor to pick up the styles from the parent page, e.g.

<telerik:RadEditor ID="RadEditor1" Runat="server">
    <CssFiles>
        <telerik:EditorCssFile Value="~/EditorContentArea.css" />
    </CssFiles>
</telerik:RadEditor>

See the following help articles for more information:
Default Font for Editable Content
Setting Editor Background And Color

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 18 Jul 2008, 12:48 PM

Thanks Rumen, but this unfortunately did not work. The H1 class is still different size in the Editor and the page. I did follow your examples and used external CSS files.

HOWEVER, I seemed to have figured out what makes the difference in getting them in sync by playing around. What is key is that you do not use font sizes (small, medium, large) but rather use real size (12pt, 14pt, 16pt etc) in your definitions. Under IE it seems they interpret things differently here.

So, as painful as it might be to change things around, I'm going to suggest to all others that have this problem to switch to using point size. At least that's the solution I can find. Perhaps someone knows of a better way, please post your solution here.

This problem seems to only exist under IE, Firefox works as expected.

Regards
Clyde