When start debug mode of my asp.net website, it renders in my browser with the url
http://localhost:111/mywebsite/Default.aspx
The css file is referenced like this in the html
<link href="~/css/style.css" runat="server" rel="stylesheet" type="text/css" />
So naturally the site breaks because it looks for the CSS file in localhost:111/css/ instead of localhost:111/mywebsite/css/.
When I launch the website, it will actually be served from the url:
http://mywebsite.com
So is there a way to reference my stylesheet properly in both my dev and production area with a simple prefix like <?=$site_url ?> or something?
Additional info
In my solution explorer, I see that my project is marked with the path C:\...\mywebsite. Is that why the ~ assumes my project is always in a subdirectory? How do I tell Visual Studios that this project should always be served as something like http://localhost:111/Default.aspx?
This is what I see in the page source of both my localhost and production server:
<link href="~/css/style.css" rel="stylesheet" type="text/css"></link>. The css is active on production, but not my localhost.
I went to the solution explorer, then selected the item in the tree labelled C:\...\mywebsite, then I went to the Properties window at bottom right of VS, and changed the Virtual path to /. Now my dev website's root is the same as my prod website's root.
This will do the trick.
<link href="<%=ResolveUrl("~/css/style.css")%>" runat="server" rel="stylesheet" type="text/css" />
You already have, ~ resolves to the root of the website when the page is rendered.
Further reading: http://weblogs.asp.net/fmarguerie/archive/2004/05/05/avoiding-problems-with-relative-and-absolute-urls-in-asp-net.aspx (which works in chrome, FF and IE).
~ resolves on the server (which is why you need runat="server").
This code is run to generate the response from a HTTP request that has come to your dev server which is hosting the site from the location of the project on your disk.
~ doesn't assume that the site is in a subdirectory, the dev server will know the root of the website.
In production the site is being hosted by IIS from another location on the disk of the server machine.
Change it to:
<link href="/css/style.css"" rel="stylesheet" type="text/css" />
Remove runat="server" (if you don't need it).
Instead of href="~/css/style.css" use: href="/css/style.css"
href="/css/style.css" means that there is a folder named css in root of your website and a file named style.css inside it.
UPDATE:
As pointed out by comments, this solution only works if your app is running in root.
Related
I am building a site and had all of my CSS, HTML working wonderfully. I wanted to add in some PHP functionality so I have created a local development environment on my mac with Apache. I then moved all of my site folders to my new Sites folder that can be accessed by localhost. When loading my website and now none of my CSS styles are loading. I am using Twitter Bootstrap locally. This is what my css links look like in my html:
link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/bootstrap.min.css">
link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/main.css">
I've tried just about every other path that I can think of and nothing else seems to work.
I changed my folder structure and the file path to:
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/main.css" />
This fixed my problem of not having the CSS render. Now the images linked in the CSS are not showing. Dev tools is telling me that I am getting an error 403 (forbidden) on each of my images. What should I do to change this permission?
I spent some time updating permissions. Everything is working now. Thanks for your help!
I would recommend referencing the CSS files relatively. So if you have the following folder structure.
myProj
- css
- bootstrap
- bootstrap.min.css
- index.html (or php)
Then you would reference the bootstrap file like so
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
Guessing at your folder structure from your example I would then assume that all you need is
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
If however your css files are not in your project, but instead are served externally, then you would need to reference them from wherever you are serving them. For example if serving them to port 8080, then you would need to reference them using that address instead.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/main.css" />
Again, the above is only if you are serving them externally from the site that you are attempting to use them from. If they are inside of the project you are working on, then reference them relatively from the file attempting to use them.
The first thing I would look at is whether or not it's a path issue with your styleheets. Use web inspector or dev tools in your browser and look for a 404 error in your CSS files. If there are any, dev tools will show the path it's looking for and you can adjust the path to your style sheets accordingly.
Good luck!
Thought I'd throw my input into the works.
I named one of my CSS files style.css than later went and deleted it and created a new style.css and my wamp server kept referencing the first style.css file I made.
So I renamed the second CSS file to main_style.css and everything worked perfectly.
Use Developer tools in google chrome or other browser and in the sources tab look for errors. Two common errors are your css files not being found (see relative path answer above) or maybe your file permissions don't allow the Apache server to access the CSS files.
I once faced the issue of CSS not being applied when I was working with PHP.
I fixed this issue by doing Empty Cache and Hard Reload (chrome).
To do that:
Open DevTools
Right-click on reload button(top-left)
Click on Empty Cache and Hard Reload
After doing this, all my CSS styles were applied.
I also faced same problem but later found a solution to it. Just Press 'Ctrl+F5' when the css file doesn't open on the browser window.
dWhen I run an ASPX page of ASP.NET web forms application using local host, as follows:
localhost:9010/MyLogin.aspx
the page is using all Bootstrap styles. Everything works as designed.
But when I run this page using the server name, as:
http//servername:9010/MyLogin.aspx
the page does not recognize any of the bootstrap styles.
This is how the bootstrap is referenced in the head of the page:
<link href="~/content/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
The physical folder where the application is installed (c:\inetpub\wwwroot\myapp) has all the sub-folders and files. As:
c:\inetpub\wwwroot\myapp\content\bootstrap\css
What could be wrong with the href above?
It's possible that compatibility settings are enabled for intranet pages. Disable that from internet explorer compatibility view settings and see if it works.
The problem is that it fails to find any css files and thus the pages render horribly.
In the head section of my master page, I have the following line:
<webopt:bundlereference runat="server" path="~/Content/css" />
When I debug from the IDE and look at PageSource, the above translates to:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-override.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
When I point IIS to the project and run using localhost, I get no css applied and the PageSource translates to:
<link href="/QM/Content/bootstrap.css" rel="stylesheet"/>
<link href="/QM/Content/bootstrap-override.css" rel="stylesheet"/>
<link href="/QM/Content/Site.css" rel="stylesheet"/>
"QM" is the Alias I chose when I created the Application in IIS.
My question: Where is the "/QM" prefix coming from and how do I suppress it?
I'm sure I'm just missing something in my IIS setup or perhaps web.config, but I have been unable to find any help from previous questions or the web.
As is often the case, I was reading the symptoms wrong, misinterpreting what was important and not getting any help. Here's what I found:
First, I found that I could get the /QM prefix when running from the IDE as well by adding it in the Project URL on the Properties window of the Project. So that wasn't the problem at all.
What was wrong was that the IIS installation (Turn Windows features on or off) did not have Static Content installed so that even though the Handler Mappings had a handler for StaticFile (already there) it wasn't able to load because that part of IIS wasn't installed. Once it was, my page loaded as expected.
I've just hosted something on Heroku, and whenever I opened the app it worked just fine with the css being linked as such:
<link rel="stylesheet" href="/css/style.css"/>
The problem came when I added my custom domain, the css no longer worked. When I view source and click on the href, it get a response "Not Found". Nothing has changed, my css folder is still in my public folder in my apps directory.
Have you tried different paths for the href, like
href="../css/style.css"
or
href="css/style.css"
I posted the following question yesterday but didn't get a helpful answer.
May i was not clear enough, i am very sorry.
After hours of searching here and googling with Bing i could not solve
the following
Problem. It does not should a "heavy" Problem.
here is my problem
I have a Domain like http://example.com that is pointed to a
virtual directory on my webspace like
http://myprovider.com/VirtualDirectoryName/.
The folder structure on my webspace is (off course) like this
root
bin
VirtualDirectoryName
bin
Content
Scripts
Views
Web.config
Global.asax
If i call now "http://www.domain.com" i get the Site without CSS and the
links
are "http://www.domain.com/VirtualDirectoryName/".
I used the default and almost empty default "Internet Application". So
the routing
is default and all links are created with #Html.ActionLink.
Please help me, i tried so many things but i cant get it working. In my
local environment i can affect that with IIS settings but (off course) i
do not have access on the IIS settings of my host.
btw, my hosting provider provider is discount ASP.NET.
Thank you all!
How are you referencing the css files in your html?
If your referencing the like:
<link href="../../Content/Style.css" rel="stylesheet" type=\"text/css\" />
It might not be looking in the correct directory. Try the referencing it as the following:
<link href="/Content/Style.css" rel="stylesheet" type=\"text/css\" />
That way you reference it from the root.
A good way to check is to use the "net" tab within firebug this will show if they are loading and if not what location it is trying to find them.
Link your css and javascript this way (using ResolveClientUrl):
<link href="<%=ResolveClientUrl("/Content/style.css")%>" rel="stylesheet" type="text/css" />
The problem was a simple routing error. My Application was only a simple folder in the iis and not a virtual directory / application. After setting the folder to an application the problem is gone.
I think you can solve it using web.config at the root as suggested here How to host ASP.NET MVC site in a subfolder