CODEWITHSUNDEEP
c#asp.nethtmlasp.net-mvc
MrM
MrM

Reputation: 21999

Why is my Style Sheet Going HayWire on MVC?

I am working on familiarizing myself with the MVC on ASP.NET. I have on my global.asax

routes.MapRoute("Dept", "Dept/Invoice/{Category}/{Name}", 
new {controller = "Dept", action = "Invoice", Category = "", Name = ""});

The Controller.cs code gets the data and put it in a table which is fine. My html starts...

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<BMICPolicy.Dept>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="Stylesheet" type="text/css" href="../../Content/Test.css" />
<html xmlns="http://www.w3.org/1999/xhtml">

Style Sheet - 

body
{
    font-family: Arial, Verdana, Book Antiqua, Sans-Serif;
    font-size: 12px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    text-align: center;
     text-align: -moz-center;
    padding: 0px;
    margin: 0px;
    position: relative;
}
table 
{
  border: solid 1px #000000;
  border-collapse: collapse;  
}

table td 
{
  padding: 5px;   
  border: solid 1px #000000;  
}

table th
{
  padding: 6px 5px;  
  background-color: #729FCB; 
  border: solid 1px #000000;   
  text-align: center;
}

thead
{
    /*font-size: medium;*/
    font: large, bold;
    text-align: center;
}

I am not sure why the Style sheet only works when I enter up to "Category" and my style sheet is completely disregarded when I type the name in the address bar (Body font style, table, td, th, thead, etc...). Am I missing something?

Upvotes: 1

Views: 261

Answers (3)

Richard
Richard

Reputation: 22016

change this line:

<link rel="Stylesheet" type="text/css" href="../../Content/Test.css" />

to this :

<link rel="Stylesheet" type="text/css" href="<%=ResolveUrl("~/Content/Test.css") %>" />

Upvotes: 0

Saulius Valatka
Saulius Valatka

Reputation: 7207

That's because your current path is treated as a nested folder hierarchy and the relative path simply does not work (your css is being search for in Dept/Invoice/Content/Test.css or something like this, which is obviously incorrect). This is a common situation with style and script files, especially when they are placed in the master page.

The right thing to do in this situation is to use Url.Content as explained in this thread. Imho this works better than an absolute path.

Upvotes: 0

Dominic Rodger
Dominic Rodger

Reputation: 99761

../../Content/Test.css is a relative URI, and means "look for a folder called Content in the parent folder of the parent folder of the current location, and in that folder find a file called Test.css.

When you only enter a category, you're looking for a sibling of the Dept folder called Content. When you enter a name as well, you're looking for a sibling of the Invoice folder.

Perhaps you want to use /Content/Test.css as the path to your stylesheet instead.

Upvotes: 3

Related Questions