We have upgraded to the Q1 2009 release but we're using the Q3 2008 skins. We display our Editors so that only the statistics show and the spell checker is available but what we're seeing since switching back to the 2008 skins is that the spell check button image is fuzzy. See below for a sample of what our markup looks like.
Anythoughts on how to correct this?
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="ResQ.Contact.Test" %> |
| <%@ 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"> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Dock.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Editor.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Spell.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/ToolBar.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Widgets.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Window.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/Dock.Office2007.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/Editor.Office2007.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/Spell.Office2007.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/ToolBar.Office2007.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/Widgets.Office2007.css" /> |
| <link rel="Stylesheet" type="text/css" href="~/Skins/Office2007/Window.Office2007.css" /> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> |
| <div style="margin: 3px 3px 3px 3px;"> |
| <telerik:RadEditor ID="editor" runat="server" |
| Skin="Office2007" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" |
| AutoResizeHeight="true" Height="55px" Width="800px" |
| ToolbarMode="Default" EnableResize="false" EditModes="Design"> |
| <Modules> |
| <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> |
| </Modules> |
| <Tools> |
| <telerik:EditorToolGroup Enabled="true" DockingZone="Right"> |
| <telerik:EditorTool Name="AjaxSpellCheck" /> |
| </telerik:EditorToolGroup> |
| </Tools> |
| </telerik:RadEditor> |
| </div> |
| </form> |
| </body> |
| </html> |
Anythoughts on how to correct this?
2 Answers, 1 is accepted
0
Hello PJ Melies,
The behavior you have described makes me nelieve that is is a purely IE browser behavior that we cannot control. In a few words:
If the case with you is the same as on ScreenShot_1.png under IE7/8. Although IE7 and IE8 support png alpha transparency, the fuzzyness that is visible on the screenshot appears when an opacity filter (filter: alpha(opacity=value)) has been applied to a .png file - although the transparency is kept, the semi-transparent (dithered) regions of the image become solid grey color. We are using filters and opacity to indicate disabled controls, and this is a standard approach. Unfortunately this is a behavior that is complete out of our contol. This did not happen in the previous versions of RadControls, because in the past we used .gif files for the icon sprites, which, of course due to the lack for alpha channel (rgba) of .gif lead to fuzyyness for all icons, and some of the skins, especially the darker ones looked really ugly. This is why we switched to .png. As of IE6, that does not have support for .png alpha transparency, we are still using the same iconset, but as a .gif file - we swap the files with CSS hacks according to the browser.
Unfortunately, at this stage we cannot help much with this issue, although we are researching for a workaround, but I belive that by giving you this information I have argumented our team's decision to abandon up .gif files for the better, and crossbrowser looks (no IE6, of course) of our skins.
However, if you need better looks for the spellcheck button, you need to create a new 16 x 16 icon, preferably a .gif file that is dithered towards the background of the toolbars of your skin and use it as an external resource, i.e:
<style type="text/css">
a span.AjaxSpellCheck
{
background: url('Path/To/Images/MyCustomSpellCheckIcon.gif') no-repeat center !important;
}
</style>
This will remove the fuzzyness from the disabled icon, as will apply your image. Do not remove the !important flag at the end of the property value, otherwise the new setting will not apply, as our styles will come after yours, and this is why custom settings need to be forced.
Have a great weekend,
Martin Ivanov
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
The behavior you have described makes me nelieve that is is a purely IE browser behavior that we cannot control. In a few words:
If the case with you is the same as on ScreenShot_1.png under IE7/8. Although IE7 and IE8 support png alpha transparency, the fuzzyness that is visible on the screenshot appears when an opacity filter (filter: alpha(opacity=value)) has been applied to a .png file - although the transparency is kept, the semi-transparent (dithered) regions of the image become solid grey color. We are using filters and opacity to indicate disabled controls, and this is a standard approach. Unfortunately this is a behavior that is complete out of our contol. This did not happen in the previous versions of RadControls, because in the past we used .gif files for the icon sprites, which, of course due to the lack for alpha channel (rgba) of .gif lead to fuzyyness for all icons, and some of the skins, especially the darker ones looked really ugly. This is why we switched to .png. As of IE6, that does not have support for .png alpha transparency, we are still using the same iconset, but as a .gif file - we swap the files with CSS hacks according to the browser.
Unfortunately, at this stage we cannot help much with this issue, although we are researching for a workaround, but I belive that by giving you this information I have argumented our team's decision to abandon up .gif files for the better, and crossbrowser looks (no IE6, of course) of our skins.
However, if you need better looks for the spellcheck button, you need to create a new 16 x 16 icon, preferably a .gif file that is dithered towards the background of the toolbars of your skin and use it as an external resource, i.e:
<style type="text/css">
a span.AjaxSpellCheck
{
background: url('Path/To/Images/MyCustomSpellCheckIcon.gif') no-repeat center !important;
}
</style>
This will remove the fuzzyness from the disabled icon, as will apply your image. Do not remove the !important flag at the end of the property value, otherwise the new setting will not apply, as our styles will come after yours, and this is why custom settings need to be forced.
Have a great weekend,
Martin Ivanov
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
PJ Melies
Top achievements
Rank 1
Rank 1
answered on 03 Apr 2009, 04:28 PM
Thank you for your reply. The solution I implemented was to actually EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet for the Editor but use the old skins as external resources for all of the other controls.