CSS references inside <head>

6 posts, 0 answers
  1. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 23 Jul 2009 Link to this post

    Hi all,

    What is the best way to add CSS file references between the <head> tags?

    The original way is like this:

    1 <link type="text/css" rel="stylesheet" href="../Assets/Css/all.css" media="screen" />  
    2 <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.Multiflexx.css" media="screen" />  
    3 <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.MultiflexxSide.css" media="screen" />  
    4  
    5 <script type="text/javascript" src="../Assets/Js/script.js"></script>  
    6 <script type="text/javascript" src="../Assets/Js/vscrollarea.js"></script>  
    7  
    8 <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="../Assets/Css/ie6.css" /><![endif]-->  
    9 <!--[if IE]><link type="text/css" rel="stylesheet" href="../Assets/Css/ie.css" /><![endif]--> 

    When I use this on pages that are 1 or 2 levels deep (in the menu structure) then some styles are not applied. Well, the IE 6 hacks in particular. I tried all kind of things to resolve the right path for the files, but none of them are working.

    If anyone has some more ideas to solve this right, let me know.
    The problem is that it is important that the order of the files is the same, and that the Conditional comments are also beeing used.

    -Daniel

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Jul 2009 Link to this post

    Hi Daniel,

    Here is how to refer CSS files regardless of the nesting:

    <link rel="stylesheet" type="text/css" href='<%= ResolveUrl("~/Assets/Css/all.css") %>' ></link>

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 23 Jul 2009 Link to this post

    Hi Albert,

    I tried that, but when you place this inside the <head></head> tags, it gives an error.

    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    -Daniel-
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Jul 2009 Link to this post

    Hello Daniel,

    Please check this help topic which shows how to avoid this error.

    Sincerely yours,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 23 Jul 2009 Link to this post

    Hi Albert,

    Thanks for the reply.
    I'm sorry, but I was wrong regarding the error. It doesn't come up, so in a way it works. I used another method, I think that was causing the error. 

    Anyway, this is what the page is rendering:

    ASPX page:

    <head runat="server">  
           <link type="text/css" rel="stylesheet" href='<%= ResolveUrl("~/Assets/Css/all.css" %>' media="screen" />     
        <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href='<%= ResolveUrl("~/Assets/Css/ie6.css" %>' media="screen" /><![endif]--> 
        <!--[if IE]><link type="text/css" rel="stylesheet" href='<%= ResolveUrl("~/Assets/Css/ie.css" %>' media="screen" /><![endif]--> 
    </head> 
     

    Rendered page:

    <head> 
    <link type="text/css" rel="stylesheet" href="App_Master/%3C%25=%20ResolveUrl(%22~/Assets/Css/all.css%22%20%25%3E" media="screen" />     
        <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="App_Master/%3C%25=%20ResolveUrl(%22~/Assets/Css/ie6.css%22%20%25%3E" media="screen" /><![endif]--> 
        <!--[if IE]><link type="text/css" rel="stylesheet" href="App_Master/%3C%25=%20ResolveUrl(%22~/Assets/Css/ie.css%22%20%25%3E" media="screen" /><![endif]--> 
    </head> 

    So, why is it looking at App_Masters first? Also, it looks a bit strange with all those characters...?

    -Daniel-
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Jul 2009 Link to this post

    Hello Daniel,

    I apologize for misleading you. Please try this instead which should be working as expected:

     <link rel="stylesheet" type="text/css" href="~/Content/test.css" runat="server" />

    Kind regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top