Rank 2
Hi all,
What is the best way to add CSS file references between the <head> tags?
The original way is like this:
| <link type="text/css" rel="stylesheet" href="../Assets/Css/all.css" media="screen" /> | |
| <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.Multiflexx.css" media="screen" /> | |
| <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.MultiflexxSide.css" media="screen" /> | |
| <script type="text/javascript" src="../Assets/Js/script.js"></script> | |
| <script type="text/javascript" src="../Assets/Js/vscrollarea.js"></script> | |
| <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="../Assets/Css/ie6.css" /><![endif]--> | |
| <!--[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
5 Answers, 1 is accepted
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.
Rank 2
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-
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.
Rank 2
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-
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.