Font name and size display issue in Firefox

[gs1711]

With my RADEditor I have used the javascript from the thread below:-

Mine is exactly the same problem.

http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-font-name-initial-value-never-gets-set-in-firefox-2.aspx

function OnClientSelectionChange(editor, args)  
{      
    var fontValue = editor.get_document().queryCommandValue("FontName");  
    if (!fontName)  
    {          
        var curValue = $telerik.getCurrentStyle(editor.getSelectedElement(), "fontFamily");  
        if (curValue)  
        {  
            var fontName = editor.getToolByName("FontName");         
            if (fontName)  
            {  
                window.setTimeout(function()  
                {  
                    fontName.updateValue(curValue);  
                }, 0);  
            }  
        }  
    }          
}


I am still facing problem with displaying font name and size. When RadEditor is in "Div" mode, this script works fine, like it would display correct Font name and size  which are Verdana and 14px in my case. but when I use Editor in div mode the "size" drop down acts weird..the one that has values like 1, 2, 3..7 being the biggest size. It just won't change the font size. The font size drop down with values in pixels was working fine though. So this was about div mode. How do I make the size drop down work wen in div mode AND with that script included?  The size was changing alright when I hadn't used that script. What could be wrong ?

Now about Iframe mode:-

When I set ContentAreaMode="iframe" and included the script above as OnClientSelectionChange="OnClientSelectionChange" , it did display the font name and size when I clicked inside the Editor in Forefox BUT it displayed Tahoma and 11 px instead of Verdana and and 14 px . Also when I typed text inside the editor it was Veradana font only and size too was 14 px. Why would it display Tahoma and 11 px? Where is that coming from? Also the Size drop down box (with values 1`, 2, 3..7) works fine when its iframe mode. But the Heading Tags drop down doesnt :( It won't change text size when I selected text and chose Heading2, heading 3, Directory, etc from the drop down.

Below are my two editors in two different modes:-

Editor1(Div mode)

 <telerik:RadEditor ID="Editor1" EnableEmbeddedBaseStylesheet="true" OnClientCommandExecuting="OnClientCommandExecuting"
                            ContentAreaMode="Div" SpellCheckSettings-AjaxUrl="~/Telerik.Web.UI.SpellCheckHandler.axd" DictionaryPath="~/App_Data/RadSpell"

DialogsCssFile="~/Skins/Default/DialogCSS.css" EnableEmbeddedSkins="false"
                            Font-Bold="false" TabIndex="18" Width="100%" ContentFilters="ConvertCharactersToEntities"
                            runat="server" StripFormattingOptions="MSWord,Css,ConvertWordLists,Font" StripFormattingOnPaste="MSWord"
                            ToolbarMode="Default" ToolsFile="~/Skins/FullSetOfTools.xml" Language="en-GB"
                            SpellCheckProvider="EditDistanceProvider" SpellEditDistance="2">
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorDropDown Name="LineSpacing" Text="Line Spacing" PopupWidth="110" PopupHeight="90">
                                        <telerik:EditorDropDownItem Name="Default" Value="" />
                                        <telerik:EditorDropDownItem Name="Single space" Value="20px" />
                                        <telerik:EditorDropDownItem Name="1.5 Lines" Value="35px" />
                                        <telerik:EditorDropDownItem Name="Double spacing" Value="50px" />
                                    </telerik:EditorDropDown>
                                </telerik:EditorToolGroup>
                            </Tools>
                            <CssFiles>
                                <telerik:EditorCssFile Value="~/css/Radeditor.css" />
                            </CssFiles>
                            <Content>
                            </Content>
                            <ImageManager ViewPaths="~/" UploadPaths="~/" />
                        </telerik:RadEditor>

Editor2(iframe mode)

 <telerik:RadEditor ID="Editor2" EnableEmbeddedBaseStylesheet="true" OnClientCommandExecuting="OnClientCommandExecuting"
                            ContentAreaMode="Iframe" SpellCheckSettings-AjaxUrl="~/Telerik.Web.UI.SpellCheckHandler.axd" DictionaryPath="~/App_Data/RadSpell"

DialogsCssFile="~/Skins/Default/DialogCSS.css" EnableEmbeddedSkins="false"
                            Font-Bold="false" TabIndex="18" Width="100%" ContentFilters="ConvertCharactersToEntities"
                            runat="server" StripFormattingOptions="MSWord,Css,ConvertWordLists,Font" StripFormattingOnPaste="MSWord"
                            ToolbarMode="Default" ToolsFile="~/Skins/FullSetOfTools.xml" Language="en-GB"
                            SpellCheckProvider="EditDistanceProvider" SpellEditDistance="2">
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorDropDown Name="LineSpacing" Text="Line Spacing" PopupWidth="110" PopupHeight="90">
                                        <telerik:EditorDropDownItem Name="Default" Value="" />
                                        <telerik:EditorDropDownItem Name="Single space" Value="20px" />
                                        <telerik:EditorDropDownItem Name="1.5 Lines" Value="35px" />
                                        <telerik:EditorDropDownItem Name="Double spacing" Value="50px" />
                                    </telerik:EditorDropDown>
                                </telerik:EditorToolGroup>
                            </Tools>
                            <CssFiles>
                                <telerik:EditorCssFile Value="~/css/Radeditor.css" />
                            </CssFiles>
                            <Content>
                            </Content>
                            <ImageManager ViewPaths="~/" UploadPaths="~/" />
                        </telerik:RadEditor>


How do I make the Editor work perfectly and not let Master page's CSS screw it up if that's what the reason is here behind the problems I am facing?

Below is my custom CSS that I am using with the Editors ie Radeditor.css :-

html, body
{
    font-family:Verdana, Arial, Helvetica, sans-serif !important;
    font-size:14px !important;
    font-weight:normal !important;
    margin: 0 !important ;
    padding:0 !important;
    
}
 body
{
    font-family:Verdana, Arial, Helvetica, sans-serif !important;
    font-size:14px !important;
    font-weight:normal !important;
    margin: 0 !important ;
    padding:0 !important;
    
}

h1,h2,h3,h4,h5
{
    color:Black !important;
    background-color:Transparent;
    background-image:none !important;
    font-weight:bold;
    border-bottom:0px !important;
    font-family:Segoe UI,Arial,Sans-serif;
    cursor:default;
    padding-left:0px;
    padding-top:0px;
    font: "Segoe UI",Arial,Sans-serif;
    text-decoration:none;
    }


With Div mode Editor I also included the CSS below on my Page:-

     <style type="text/css">
        #<%=Editor1.ClientID%>_contentDiv
        {
            font-family: Verdana !important;
            font-size: 14px !important;
            font-style:normal !important;
            color:Black;     
        }
       
    </style>

Also Please tell me how do I style Heading tags (H1, H2,...H5) when Editor is in Div mode as well as in Iframe mode? Those are not working correctly. Please check my RadEditor.css custom skin above. I have styles Heading tags in it but its still not working fine. What else is needed to be done? How do i get my master page to not affect Heading tags of the editor at all? What all properties do I need to set in that custom css file for my heading tags so they work perfectly.

[Rumen]

Hi,

Can you please open a separate support tickets for the different problems that you experience with IFRAME and DIV based content area modes? Please, isolate the problems in simple working projects, which we can run and reproduce the problems. Attach all needed project files, css, HTML content, etc needed for the problems reproduction. It will be also very helpful to record the steps for problem reproduction using Jing or another screen capture tool.

Best regards,
Rumen
the Telerik team