I've noticed that to get CSS-Intellisense working in VS, the paths have to be relative - Is this the case?
However, it seems
<link href="/resources/test.css" [...] />
is far more practical than
<link href="resources/test.css" [...] />
I'm including the CSS in the master page, and don't see much good in including it as a content block, just to get the relative paths correct for each directory depth. I've had a quick try with inline code resolving the path, but no dice there either (for Intellisense).
I feel I'm missing something fairly simple - What's the correct approach here to have CSS Intellisense work across the pages in the app during dev, and render fine in any deployed state?
Cheers.
(Note - I'm aware that a <% if (false) { %> type hack is required for user controls)
I know this is an older question, but this works fine in VS2008. If my memory serves me correctly it was fixed in a hotfix a while back:
alt text http://img168.imageshack.us/img168/8893/testgo.png
The other alternative ( if this isn't working for you still ) is adding a runat="server" and the tilde "~"
<link rel="stylesheet" runat="server" media="screen" href="~/css/styles.css" />
This worked for me. YMMV
Related
Hello and thanks for reading this.
I have an Umbraco site and except from this one error, it works perfect.
As normal in umbraco paths for sites look like
Localhost:xxxxx/
Localhost:xxxxx/Blog/
Localhost:xxxxx/Blog/Blog-Item1/
When I enter Localhost:xxxxx/Blog/Blog-Item1/ ass css stops working / is removed, but if i remove the last / its back and working perfect.
Localhost:xxxxx/Blog/Blog-Item1/ - NOT WORKING
Localhost:xxxxx/Blog/Blog-Item1 - WORKING
Have anyone any idea why the last / makes my Css stop?
I had this problem once before, and I think it might be the same as you have.
Check you Links to your style sheets.
<link href="Content/font-awesome.min.css" rel="stylesheet" />- Not working
<link href="~/Content/font-awesome.min.css" rel="stylesheet" /> - Working
It kinda sure it will be the missing ~/ in your styles that is the problem.
Hope it works
I have a problem with my webmatrix in using an external style sheet,the page still loading and nothing appear,but when I put the css I used in a style tag inside the head tag the problem is solved , but i need to put them in an external file ... how ?
why I faced that problem ?
There isn't anything you do differently in WebMatrix for this (except that you may want to prepend the path to your file with a tilde (~) which has the effect of telling the server-side code to make an absolute path out of a relative one in ASP.Net Web-Pages [not sure about Web-Forms or MVC]).
You just do this:
In your HTML Page (in the <head> section):
<link href="~/someDirectory/someCSSFile.css" rel="Stylesheet" type="text/css" />
Then just make sure the css path and file name are correct, and you're good to go.
I am very confused, I just started to work on the CSS for my ASP.NET MVC4 website and I don't fully understand what is happening.
Currently my mobile layout works but any changes to it causes one strange effect after another. (e.g. the forms not being displayed to the ajax-loader.gif constantly being displayed.)
I have the following in .Layout.Mobile.cshtml
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I have modified the BundleMobileConfig.cs in App_start as follows:
// bundles.Add(new StyleBundle("~/Content/Mobile/css")
// .Include("~/Content/Site.Mobile.css"));
//kludge is the above wrong...and the following needed??
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/"));
I don't understand why this is NOT the default for this bundle?
Here are my questions / problems:
If you will note the stylesheets, I should not need to include the three explicit links, they should come from the bundles. But if delete any of them the site breaks.
Why won't the modified ~/Content/Mobile/css bundle pull up these css files?
For the script files I have looked at the code.jquery.com and I don't understand why I need these. My local code is the latest (i.e. jquery-1.9.1.js and jquery.mobile-1.2.0.js
I would expect that the version 1.9.1 shoud be able to replace the 1.7.1 without
problems, but it doesn't
The jquery.mobile.min.js should only be switching between a release and debug
vesion, which should not cause a problem, but it does.
I have used firebug to view what files are being loaded and I see that when I use just
the Render of the bundles without the explicit includes I don't get the files included, why not? I have read about bundles and it seems like I should just get the bundled files.
Can any one shed some light on what is happening and point me to a tutorial so I can learn
how to use how to debug CSS and bundles. I have read several and I find firebug very
useful, but I have no idea where to look next.
Try replacing your bundle code with this.
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/jquery.mobile*"));
This should load your files without explicitly doing so.
Your right this did work! Thanks....
The strange thing is that the following did not work:
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/jquery.mobile-{version}.js",
"~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
"~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
"~/Content/Mobile/css/"));
I understand why your example works...but don't understand why mine doesn't ... unless the version tag does not work like I expect it to....
Also I found out the jquery 1.9.1 is much different from 1.7.1 for this I had to do the following:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
this works....using your example I will figure out a wild card pattern to include this as well.
I use ResolveClientUrl to include css files in my page. When launched through web-server everything is OK, but in design mode css styles are not applied to the page. I use VS 2010 beta 2.
<link href= "<%= ResolveClientUrl("~/Styles/Site.css") %>" rel="stylesheet" type="text/css" />
Same thing happens when I use any expression to specify an url for css.
How can I fix it? Or is it a bug of beta?
It's an inherent limitation of both. I contacted microsoft 3 years ago about the exact same issue.
The solution is to put the path directly inside the href attribute. It should work properly then.
It may, however, malfunction at runtime, depending upon your use of URL rewriting or routing.
The real bug here isn't in the design mode, but in the ASP.NET framework, because it doesn't parse and resolve <link> tags properly when they are used inside content pages (dig around with Reflector to find out for yourself)...
You can read more about the issue and how to fix it in a (hopefully) future-proof manner here:
http://nathanaeljones.com/146/referencing-stylesheets-scripts-from-content-pages/
I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview