ASP .Net MVC in VS2008 - published build appears differently

Question

When I run my MVC application through Visual Studio 2008, the website looks fine with regards to the styling, images, etc.

But if I publish this build to a folder and use IIS to view it, the styling is all over place, and images are not right.

Initially, I thought this was some error on my behalf with regards to the style sheet, but I am using only a slightly modified version of the stylesheet that came out-of-the-box with the MVC template.

Am I doing something wrong with regards to publishing the site, or with the CSS sheet?

Kind regards,

Brett

Answer 1

This was entirely my fault!

I used tags on my page to try to display tabular data - this rendered fine when I was running the project from within Visual Studio, but when I published the site, the CSS on the page appeared distorted on the page in Internet Explorer 7 and 8.

However, when I viewed the same published build in Firefox 3, the website appeared to render correctly on the page...! Strange, I know.

I did try to correct the CSS to fix the parts that didn't render correctly in Internet Explorer, but ended up removing the tags entirely due to time, and brought in the tags instead, much to my dismay!

Answer 2

The most likely culprit is that your paths are relative to the root of the site and you are publishing in a folder that isn't at the root. You'll want to change your URLs in your CSS to make them relative to the CSS file and in your mark up to use Url.Content so that the URLs are translated dynamically.

<img src='<%= Url.Content( "~/Content/images/image.png" ) %>' alt="" />

Answer 3

I had nearly the exact same issue, then remembered my URLs. If you view the source in your IIS version, you should be able to see that the URL's are incorrect when pointing to the CSS files etc...

I replaced all of the CSS and JS calls in my master with the helper methods eg:

<%= Html.RegisterCSS("site.css") %>
<%= Html.RegisterScript("jquery-1.3.2.min.js") %>

Hope this helps...

---

Edit: Ahh, yep, I've created a helper to "help" me out. So, I've got the following code in a helper.

public static string RegisterScript(this System.Web.Mvc.HtmlHelper helper, string scriptFileName)
    {
        string scriptRoot = VirtualPathUtility.ToAbsolute("~/Scripts");
        string scriptFormat = "<script src=\"{0}/{1}\" type=\"text/javascript\"></script>\r\n";
        return string.Format(scriptFormat, scriptRoot, scriptFileName);
    }
    public static string RegisterCSS(this System.Web.Mvc.HtmlHelper helper, string FileName)
    {
        //get the directory where the scripts are
        string Root = VirtualPathUtility.ToAbsolute("~/Content");
        string Format = "<link href=\"{0}/{1}?{2}\" rel=\"stylesheet\" type=\"text/css\" />";
        return string.Format(Format, Root, FileName, DateTime.Now.ToString("hhmmss"));
    }

And I've had a "gotcha" where IE8 was displaying in IE7 mode. This caused me a headache until a colleague pointed it out... I haven't got IE8 here but I think it's in the developer tools section.