ASP.NET page is not loading CSS styles

Question

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;
}

Paste the part of the Master Page file where the css is linked — Marek Musielak
– Marek Musielak, Commented Jun 23, 2012 at 10:14
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
– dash, Commented Jun 23, 2012 at 10:44
@Azeem try to load the page without use cache data, press CTRL+F5. — AntonioHL
– AntonioHL, Commented Apr 12, 2018 at 0:04

Marcel N. · Accepted Answer · 2012-06-23 15:05:55Z

30

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.

edited Jun 23, 2012 at 15:05

answered Jun 23, 2012 at 10:18

Marcel N.

14k5 gold badges50 silver badges74 bronze badges

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

5 Comments

Azeem Over a year ago

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

Marcel N. Over a year ago

If it still doesn't work then update your post with how the markup looks now and also describe what happens.

Azeem Over a year ago

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...

Azeem Over a year ago

Please download it from link. thanks for your help

Marcel N. Over a year ago

OK, fixed. I'll update my answer. You can download it from here: sdrv.ms/KTy1xN

user3123048 · Accepted Answer · 2014-08-05 15:34:09Z

2

This works for me in my master pages:

<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'

answered Aug 5, 2014 at 15:34

user3123048

211 bronze badge

1 Comment

Mmm Over a year ago

Thank you! I've spent hours trying to get a custom CSS file to work on my DNN module, and this is the only thing I've found that works short of including the CSS in <style> tags!

KyleMit · Accepted Answer · 2020-02-24 22:35:19Z

1

Add runat="server" to the head attribute and also ensure the link targets the root as in ("~/path to css")

<head runat="server">
    <title>Page Title Here</title>
    <link href="~/css/main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>

edited Feb 24, 2020 at 22:35

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Feb 15, 2016 at 11:49

Godwin Awojobi

1151 silver badge3 bronze badges

Comments

Laurel · Accepted Answer · 2018-01-24 19:37:13Z

0

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>

edited Jan 24, 2018 at 19:37

Laurel

6,23114 gold badges35 silver badges60 bronze badges

answered Jun 23, 2012 at 10:25

Aghilas Yakoub

29k5 gold badges49 silver badges51 bronze badges

2 Comments

Marcel N. Over a year ago

That won't work. The link element has to be with runat=server in order for ASP.NET virtual paths to work.

Azeem Over a year ago

yes @the coon is right. The ~ is NOT working with or without runat server attribute...

Eric Aya · Accepted Answer · 2019-02-08 16:27:43Z

I found that it was ASPNETCORE_ENVIRONMENT set to Development for debug. And in the _Layout.cshtml I had the asp-append-version missing.

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

I fixed that and it was all good again:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Collectives™ on Stack Overflow

ASP.NET page is not loading CSS styles

5 Answers 5

5 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related