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

Loading external skin css file doesn't work on IE 9

2 Answers 112 Views

SkinManager

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

wg asked on 03 Sep 2013, 06:08 PM

IE9-not-working.jpg

firefox-OK.jpg

chrome-ok.jpg

Hi Telerik,

---------------------------------------------------
Telerik.web.dll version: 2013.1.403.40
net .4.0
VS2012
---------------------------------------------------
I don't want make skin files into an dll file, because my client needs to modify it without dll files. So I download 1 skin from Visual Style Builder which name is s_office2007.zip and extract it.

I put all files under my solution and I wrote below codes. two buttons, one uses s_office2007, one uses default skin.(just want to see how different it is) However, it is working on Firefox & Chrome ,not IE 9. The button which uses s_office2007 shows wrong style, did I miss someting?

Thanks in advance.
Bill

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StyleTest.aspx.cs" Inherits="EmailClient.StyleTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="Styles/s_office2007/AutoCompleteBox.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Button.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Calendar.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ColorPicker.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ComboBox.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/DataPager.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Dock.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/DropDownList.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Editor.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/FileExplorer.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Filter.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/FormDecorator.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Grid.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ImageEditor.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Input.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ListBox.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ListView.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Menu.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Notification.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/OrgChart.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/PanelBar.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/PivotGrid.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ProgressArea.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Rating.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/RibbonBar.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Rotator.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Scheduler.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/SearchBox.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/SiteMap.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Slider.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/SocialShare.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Splitter.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/TabStrip.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/TagCloud.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ToolBar.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/ToolTip.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/TreeList.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/TreeView.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Upload.s_office2007.css" rel="stylesheet" />

<link href="Styles/s_office2007/Window.s_office2007.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="s_office2007">

</telerik:RadSkinManager>

<div>

<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="True" EnableTheming="False"></telerik:RadButton>

<telerik:RadButton ID="RadButton2" runat="server" Text="RadButton" Skin="Default"></telerik:RadButton>

</div>

</form>

</body>

</html>

Please take a look at attachments. same aspx page. but works on Firefox & Chrome, not IE 9.

2 Answers, 1 is accepted

Accepted

answered on 06 Sep 2013, 07:22 AM

Hi,

Without any sample project provided it is hard to predict what the issue could be. It could be a missing sprite/resource or a wrong url path to it.

Note that if you load your application in IE, and it is complicated (using a lot of controls), you could experiencing the 31 stylesheet limitation issue.

If you load more controls on a page it could be possible to load more than 31 stylesheets on a page, then IE would not load all of them.

There is a blog post on our website: Internet Explorer CSS Limits where the problem is described in detail and suggests several ways to fix the issue.

But in shortly, I will suggest you to add RadStyleSheetManager to your application. RadStyleSheetManager control gives developers the advantage of a simple drag-and-drop to achieve the combination of resources to a single request. All you need is to add a RadStyleSheetManager to your page and the stylesheet requests will be combined into a single request.

If you still experiencing problems with applying the custom skin to your application, it will be necessary to send us your project in order to help you further.

Regards,
Bozhidar
Telerik

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 the blog feed now.