up vote 2 down vote favorite

This is a simple website in ASP.NET with C# using VS 2010. I have following directory structure for this project:

enter image description here

The starting page is Default.aspx and it loads perfectly. But when I open page Interface/SystemAdminLogin.aspx from Default page, it loads with no CSS styles. I have imported CSS style sheet in Master Page. Here is how I am referencing MasterPage file in both .aspx files:

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

SystemAdminLogin.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>

I dont see any mistake with my code but why Page in Interface folder is not loading CSS styles?? Please help.

Here is the master page code where i am importing css file:

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>

And here is the part of CSS file code:

body {
margin: 0;
padding: 0;
background: #fff url(../images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
share|improve this question
2  
Paste the part of the Master Page file where the css is linked – Maras Musielak Jun 23 '12 at 10:14
Are you using IIS? – Ashwin Singh Jun 23 '12 at 10:38
You might find it easier to use ASP.Net themes - this will take care of all of this for you. See stackoverflow.com/a/8564035/1073107 or the MSDN page msdn.microsoft.com/en-us/library/ykzx33wh.aspx – dash Jun 23 '12 at 10:44
@AshwinSingh no, not using IIS. – Nida Sulheri Jun 23 '12 at 11:12
+1 that solved my problem – Devjosh Sep 19 '12 at 10:07

2 Answers

up vote 7 down vote accepted

The stylesheets included in your master page are using relative paths.

Specify your stylesheet links with runat=server and prefix them with the virtual web root path (~):

<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

OR:

<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

But keep in mind that the first option is recommended. The second will not work when you publish your site in a virtual directory.

After last comment...

The image URL's in CSSs should be updated as well, in order to not use relative paths or do any path traversal (../).

background: #fff url(images/img01.jpg) repeat-x left top;

For this option you will need to move the images folder inside the Styles folder (it's a good practice to do so).

Final update:

Looks like that the head element also needs to be runat=server in order for ASP.NET relative paths (~) to work within link elements with runat=server.

share|improve this answer
I have added master page code in my post. – Nida Sulheri Jun 23 '12 at 10:21
Updated answer. – marceln Jun 23 '12 at 10:22
Hi, when i used first option then Default.aspx is not loading CSS styles too... I have added part of CSS code in post. Please look into it. thanks – Nida Sulheri Jun 23 '12 at 10:26
If it still doesn't work then update your post with how the markup looks now and also describe what happens. – marceln Jun 23 '12 at 10:35
I have updated code as you said and also placed images folder in Styles but same issue!!! Default.aspx loads css fine but SystemAdminLogin.aspx is not... I am attaching project files in my post, it will make you better understanding of what i have done and what needs to be done... – Nida Sulheri Jun 23 '12 at 10:45
show 5 more comments
up vote 0 down vote 
Hello try with (~ in your path)

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="~/Styles/style.css" runat="server" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
share|improve this answer
That won't work. The link element has to be with runat=server in order for ASP.NET virtual paths to work. – marceln Jun 23 '12 at 10:28
yes @the coon is right. The ~ is NOT working with or without runat server attribute... – Nida Sulheri Jun 23 '12 at 10:30
Yes that's true – Frederique Jun 23 '12 at 10:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.