0

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.

Improve this question
4
  • 1
    The tilde(~) character is meant for referencing the root of your application, so it should render the link element correctly. What exactly are you seeing in the page source? Commented Apr 11, 2011 at 14:16
  • I see this in the page source <link href="~/css/style.css" rel="stylesheet" type="text/css"></link>, which works on my production website, but not my localhost. Commented Apr 11, 2011 at 14:21
  • Are you sure you have the CSS folder and file on your local machine? :) Commented Apr 11, 2011 at 14:59
  • @Joe - yes i'm sure. BEcause if i change the path to /blutip/css/style.css, then it works on localhost. Commented Apr 11, 2011 at 15:16

4 Answers 4

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

This will do the trick.

<link href="<%=ResolveUrl("~/css/style.css")%>" runat="server" rel="stylesheet" type="text/css" />
Improve this answer

1 Comment

You're missing the close " after the sever script close tag.
0

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.

Improve this answer

1 Comment

Hi StuperUser, that page is broken for me. only shows an error. I also added additional info to my Question
-1

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.

Improve this answer

1 Comment

What if your app is not running in the web root?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.