In my application, I am having problems getting a stylesheet because it is using the URL, and trying to find a corresponding controller. For Example,
I have the following in one of my views:
<link href="~/Content/css/styles.css" type="text/css"/>
Which when the page loads, throws a 500 error, and tells me that...
www.mysite.com/design/Content/css/styles.css could not be found
It is using design as the area, because that is the name of the package it is in.
What do I need to do in order to hit my static css file at the above address, without it trying to find a controller named "Content"?
Shouldn't the html be rendered using:
<link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/styles.css") %>" />
Or:
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/css/styles.css")" />
(If you are using Razor).
I dont think this is an issue with your MVC routes, but more that you are not resolving the url correctly.
It sounds like you want a domain-relative path rather than an application-relative path.
Remove the ~.
Related
I've got a popup which is in a user control and then registered inthe header of my aspx page. In the header I've indluded the javascript for the pop up to function and this works well. However, I've also got a css file included which doesn't seem to get applied. I've tried to include the css file in the user control like this:
<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("../css/shared.css") %>" />
But it didn't work. Any suggestions how I can include the css file? Am I right in assuming I have to do this in the user control?
Remove .. and Add ~ in css path.
<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("~/css/shared.css") %>" />
I am trying to get rid of these errors but still they keep showing up in my logs.
I have this article http://mathiasbynens.be/notes/touch-icons about touch icons and did as advised :
<link rel="apple-touch-icon-precomposed" href="./apple-touch-icon-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./apple-touch-icon-72x72-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="./apple-touch-icon-76x76-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./apple-touch-icon-114x114-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./apple-touch-icon-120x120-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./apple-touch-icon-144x144-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="./apple-touch-icon-152x152-precomposed.png"/>
I have set the files at the root of my website.
With this done I no longer see the error for the main controller BUT see errors for every other controllers that are on my website.
Any help is welcome to get rid of these errors once for all
Thanks,
You're using relative paths.
The browser resolves those paths relative to the directory in the current URL, which is typically your controller name.
You want to use absolute paths, by removing the ..
The "./apple-touch-icon-72x72-precomposed.png" is a relative path, which may differ depending on the context.
Two options would be to either use absolute paths, such as:
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/Images/apple-touch-icon-152x152-precomposed.png"/>
Or, if you are using the Razor engine, you can use a helper:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="#Url.Content("~/Images/apple-touch-icon-152x152-precomposed.png")" />
I have applied a URL-rewrite rule to my web-site using UrlRewritingNet.UrlRewriter.dll extension. On the web.config file I have written rules like the following:
<add name="Default"
virtualUrl="^~/(.*)/Default.zkn"
rewriteUrlParameter="ExcludeFromClientQueryString"
destinationUrl="~/Default.aspx?lang=$1"
ignoreCase="true"
/>
It easily changes http://sitename.com/en/Default.zkn to Default.aspx?lang=en
A part of my head section is like the following:
<link href="Styles/Default.css" type="text/css" rel="Stylesheet" media="screen" />
But since I have applied this, The styles and the additional javascript files pointed relatively on the head section are not loaded.
Then I have tried to add ~ character.
<link href="~/Styles/Default.css" type="text/css" rel="Stylesheet" media="screen" />
Many people said this would work. But no, it did not work.
After page loads I open the source on the browser and I see that ~ character was not replaced with my site folder.
So a 404 error occurs for the css and js files.
How can it be corrected?
Is there a way to add a new URL-rewriting rule for the style/js files also?
Maybe you can try :
<%
var basePath = String.Format("{0}{1}",Request.ApplicationPath, string.IsNullOrEmpty(Request.ApplicationPath) || !Request.ApplicationPath.EndsWith("/") ? "/" : "");
%>
<link href="<%=basePath%>Styles/Default.css" type="text/css" rel="Stylesheet" media="screen" />
I'm writing a ASP.NET Web Application and I'm running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn't apply it. I've tried internal and external style sheets. Inline does work but I'd like to avoid inline. Here is some sample code of what I have and tried
Master Page:
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
<!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>
I've added the simple css file just so people could see that the syntax is correct:
LoginStyleSheet.css
#usrLabel {
color:Blue;
background-color:Aqua;
}
#Label4 {
background-color:Black;
}
Any help would be greatly appreciated
Update #1
HTML output for header:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
<!-- <link href="<%= ResolveUrl("~/Styles/MasterStyleSheet.css") %>" rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>
A lot of <link> elements are currently commented out but those are all different ways I've tried.
Update #2
First I appreciate the many responses. They have all been geared towards figuring out why my external css file won't work. However, if i try internal css style sheet it still doesn't work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets
As you have already realised, the following won't translate into an absolute path, because it is not an asp.net object...
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
Instead, try using this...
<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />
UPDATE (after updated question)...
If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly...
(I have removed commented out lines, and added the line starting with **... the ** should NOT be included)
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
**<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>
ALSO #aRsen49 highlights a possibility in his answer... and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that # denotes an id where as . denotes a class)?
FURTHER UPDATE
If #Trisped is correct in his assumption, I think I might have an idea what is going wrong...
If usrLabel and Label4 are asp objects (such as <asp:Label>), the fact you're using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabel and Label4, but in fact they'll be something like ct100_Content1_usrLabel and ct100_Content1_Label4... so your CSS as you currently have it will not link up correctly.
So I would recommend you either update your CSS to use the id's sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel" attributes to each of the objects, and then update your CSS to .usrLabel instead.
Ok so here was the fix. So in my html the id was label4. However, because it was in a content page with a contentplaceholder id of ContentPlaceHolder1 once the html was actually generated the label's id was being changed from label4 to ContentPlaceHolder1_Label4. Therefore i had to change my css code. BTW f12 on ie works wonders. Thanks again for all the help. Sorry it was something as simple as an id being wrong.
In your master page, define a HEAD element and then mention the link for CSS classes. Then it would work on all your content pages. I have found a good reference for you here
If you use Visual Studios "drag and drop" the CSS sheet in your code.
If it still wont work, double check your CSS.
For example:
Did you create CSS Classes (CssClass = ) for ASPX Elements?
Are Class names right?
etc.
UPDATE
I know this might sound odd.. But Close down VS and restart it. Then Display the Page again. Furthermore.. When you display the page press F5! I believe your cache or similar might be the problem.
Try:
Open the page in Chrome
Right click on an element which is applying the style (something in the master page) and select "Inspect element".
In the window that pops up copy everything in the "Styles" panel (this panel is usually on the right side, just under computed style).
Right click on an element which is not applying the style and select "Inspect element".
Compare what is in the Styles with what you copied earlier.
If that does not get you on the right track then we will need one or both of the following:
The rendered html of a page which is not working. This should be the complete file. The page should not reference external resources like CSS or JS files.
A master page and content page which exhibit the issue.
Please note that these should be basic pages which exhibit the issue (not a production page with multiple controls on it).
I have created a Helper method in MVC3 Razor project as(Helpers.cshtml)
#helper Link(string fileName, UrlHelper url){
<link href="#url.Content("~/Content/" + fileName)"
rel="stylesheet" type="text/css" />
}
But i get a warning tooltip "Element link cannot be nested within element 'link'".
I found similar type of question on Asp.net
Error when using link href inside my ContentPlaceHolder
Do we have a solution for this.
Keep in mind that you should only have <link> tags in the <head> and not the <body>. The tooling is unable to confirm from where you'll call this helper, so it barks.
You can verify that this is what's going on by temporarily wrapping the helper in a valid skeleton of markup as below. The warning should go away. You can then confirm the negative case by changing link to some made-up tag like foo, or by removing the title, and watch those errors then appear. You should then be comfortable that as long as you only call your helper from inside <head> sections, your resulting link markup is ok.
<html>
<head>
#helper Link(string fileName, UrlHelper url){
<link href="#url.Content("~/Content/" + fileName)" rel="stylesheet" type="text/css" />
}
<title>Foo</title>
</head>
<body></body>
</html>