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.
7 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 31 Oct 2012, 06:34 AM
Hi Kevin,
Here is the sample code that I tried based on your scenario which works as expected.
ASPX:
Style.css
Please provide your full code if the issue persists.
Thanks,
Princy.
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.
0

Kevin
Top achievements
Rank 1
answered on 31 Oct 2012, 04:16 PM
Thanks for getting back to me. Here is the code:
here is where I am adding the css files
Here's the CSS:
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.
<
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.
0
Hi,
Check whether some of the CSS files imported via the CssFiles property is not importing the font-size.
Regards,
Rumen
the Telerik team
Check whether some of the CSS files imported via the CssFiles property is not importing the font-size.
Regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Kevin
Top achievements
Rank 1
answered on 03 Nov 2012, 06:35 AM
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.
0
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
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Kevin
Top achievements
Rank 1
answered on 03 Feb 2013, 08:07 AM
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.
0
Accepted
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
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.