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

3 posts, 1 answers
  1. wg
    wg avatar
    30 posts
    Member since:
    Jul 2006

    Posted 03 Sep 2013 Link to this post

    Hi Telerik,

    Telerik.web.dll version:  2013.1.403.40
    net .4.0
    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.

    <%@ 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>
    <head runat="server">
        <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" />
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="s_office2007">
            <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>

    Please take a look at attachments. same aspx page. but works on Firefox & Chrome, not IE 9.
  2. Answer
    Bozhidar avatar
    677 posts

    Posted 06 Sep 2013 Link to this post


    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.

    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.
  3. DevCraft R3 2016 release webinar banner
  4. wg
    wg avatar
    30 posts
    Member since:
    Jul 2006

    Posted 29 Oct 2013 Link to this post

    Hi Bozhidar ,

    Sorry for reply so late. You are right, 31 limitation is the problem. Thank you so much.
Back to Top