Font-size for elements not resizing based on css file

[Kevin]

I am having a problem where the radeditor is setting all of the elements that do not have a font-size specifically applied to the element to 16px.  I have set the css file to 13px !important.  However that doesn't seem to work.  Attached is a screen shot of firebug showing that the computed font-szie is 16px but it shows the inherited font sizes as 13px.  If I just set the body font but don't style it with !important then it shows that the font size is overwritten but it doesn't show the style that is overwriting it. 

[Princy]

Hi Kevin,

Here is the sample code that I tried based on your scenario which works as expected.

ASPX:

<telerik:RadEditor ID="RadEditor1" ContentAreaCssFile="Style.css" Runat="server"  >
</telerik:RadEditor>

Style.css

body
{
  font-size:16px !important;
}

Please provide your full code if the issue persists.

Thanks,
Princy.

[Kevin]

Thanks for getting back to me.  Here is the code:

<div id="SpannedWrapper">
    <div style="text-align:left; margin: 10px 0px;">
        Page Title: <telerik:RadTextBox ID="PageTitle" runat="server"></telerik:RadTextBox>
    </div>
    <div id="TabbedPanel" class="space">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Web20" MultiPageID="HomeInfo"
            SelectedIndex="0" Align="Left" ReorderTabsOnSelect="true">
            <Tabs>
                <telerik:RadTab Text="Edit Page"></telerik:RadTab>
                <telerik:RadTab Text="Security"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="PageProperties" runat="server" SelectedIndex="0" CssClass="pageView">
            <telerik:RadPageView ID="Editors" runat="server">
                <Telerik:RadEditor ID="PageEditor" Runat="server" OnClientModeChange="OnClientModeChange"></Telerik:RadEditor>
            </telerik:RadPageView>
            <telerik:RadPageView ID="SecuritySettings" runat="server">
                <div id="UserListWrapper">
                    <asp:CheckBoxList ID="UsersList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"></asp:CheckBoxList>
                </div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <div class="defaultBoxSubmit">
        <asp:Button ID="Save" runat="server" Text="Save Page" CssClass="floatLeft" OnClick="SavePage_Click" ClientIDMode="Static" />
        <asp:Button ID="Cancel" runat="server" Text="Cancel" CssClass="floatLeft" OnClick="Cancel_Click" />
    </div>
</div>

here is where I am adding the css files

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    if (!IsPostBack)
    {
        EditorCssFile masterCSSFile = new EditorCssFile();
        masterCSSFile.Value = "/includes/css/master.css";
        PageEditor.CssFiles.Add(masterCSSFile);

        EditorCssFile editorCssFile = new EditorCssFile();
        editorCssFile.Value = "/includes/css/RadEditorStyle.css";
        PageEditor.CssFiles.Add(editorCssFile);

        List<SiteStyleSheet> listOfStyleSheets = new SiteStyleSheet().SelectStyleSheetsBySiteIDNotDeleted(ThisSiteID);
        for (int i = 0; i < listOfStyleSheets.Count; i++)
        {
            string customCSS = String.Format("/userFiles/styleSheets/{0}/{1}", ThisSiteName, listOfStyleSheets[i].StyleSheetUrl);

            PageEditor.CssFiles.Add(customCSS);
        }

        PageEditor.Height = 685;
        PageEditor.Content = Server.HtmlDecode(pageContent.PageContent);
        string[] imagepath = { String.Format("/userfiles/images/{0}", ThisSiteName) };
        PageEditor.ImageManager.UploadPaths = imagepath;
        PageEditor.ImageManager.ViewPaths = imagepath;
        PageEditor.ImageManager.DeletePaths = imagepath;
        PageEditor.ImageManager.MaxUploadFileSize = 10000000;

        string[] flashpath = { String.Format("/userfiles/flash/{0}", ThisSiteName) };
        PageEditor.FlashManager.UploadPaths = flashpath;
        PageEditor.FlashManager.ViewPaths = flashpath;
        PageEditor.FlashManager.DeletePaths = flashpath;
        PageEditor.FlashManager.MaxUploadFileSize = 10000000;

        string[] documentpath = { String.Format("/userfiles/siteDocuments/{0}", ThisSiteName) };
        PageEditor.DocumentManager.UploadPaths = documentpath;
        PageEditor.DocumentManager.ViewPaths = documentpath;
        PageEditor.DocumentManager.DeletePaths = documentpath;
        PageEditor.DocumentManager.MaxUploadFileSize = 10000000;

        PageTitle.Text = pageContent.PageTitle;
    }
}

Here's the CSS:

body
{
    font-family: Verdana, Book Antiqua, sans-serif;
    font-size:13px !important;
    font-weight:normal;
    color:#000000;
    background:#12575d;
    padding:30px 0px 0 0;
    line-height: 1.25em;
}

The css for anything that isn't specified specifically is defaulted to 16px.  Even though the font-size should be 13px from the cascade from the body.  While I can fix this by going in and performing a base reset of all elements to 13px this will cause a lot of problems because it should just cascade from the body and it would mess up my cascade effects from classes.

[Rumen]

Hi,

Check whether some of the CSS files imported via the CssFiles property is not importing the font-size.

Regards,
Rumen
the Telerik team

[Kevin]

That was the first screen shot I sent.  Was a firebug screenshot showing the dynamic css file applying the font size via the html and body tag.  They are both set at 13px !important  html, body {font-size: 13px !important;} There's more than that but it's margin, padding and standard stuff.  When I look at it it shows that the body font-size is not being overwritten but when I look at the p tag it shows 16px instead of the 13px it should be inheriting.  I'm sure there's something in there doing that but I just can't find it. 

[Dobromir]

Hi Kevin,

This is indeed very odd behavior. The provided RadEditor configuration looks OK, however, we cannot fully test it without the specific CSS files added to the control and the content itself. Could you please provide sample fully runnable project reproducing the issue and or a live URL where we can examine the issue?

In addition, could you please check if there is not Zoom set to the page? You can reset the browser zoom using Ctrl+0 shortcut.

Kind regards,
Dobromir
the Telerik team

[Kevin]

So I have determined that this has to do with tables in the iframe editor.  So the radeditor is in iframe mode, the end user places a table on the page and the drops text into the table.  By default the system uses the body font-size and cascades down to the table on the page.  However in the radeditor you can see that even if you set the font-size in the body with the !important operator.  The font is still overridden in the editor to be 16px.  If instead of putting the text in a table you put the text in a div then the font cascades appropriately.  I cannot force a default font for the tables either as this is for a CMS that we are building to support many different clients.

[Rumen]

Hello,

I am afraid that this is a browser behavior to apply different font-size to the table elements. The only way to correct it is to define a table, tr class for table elements. This class will be applied only in Design mode of RadEditor.

You can find more information in these articles:
Setting Content Area Defaults,
Content Area Appearance Problems
and
Customize Content Area.

Best regards,
Rumen
the Telerik team