Relative path to a stylesheet in Visual studio not working in preview

Question

I'm assuming this is an easy question, but I'll be darned if I can find the answer.

I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css

At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.

If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx

In this case the / takes the path right back to http://localhost:2020

This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).

I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.

Any ideas?? Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.

Solution 1

I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.

Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.

If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.

In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.

The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%@ Page ... directive on each page.

In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.

There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.

Solution 2

I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.

So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way

background: url(../image/..);

of course the code above sitting in the CSS file. It works for me all the time

Solution 3

not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:

1) click on the project in the solution explorer

2) it shows a "Virtual Path" property which is defaulted to "/projectname"

3) change it to "/" instead and it seems to do what is desired

let me know if this works for you!