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:
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;
}
5 answers
solution1
30 ACCPTED 2012-06-23 10:18:14
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 .
solution2
2 2014-08-05 15:34:09
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>'
solution3
1 2016-02-15 11:49:39
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>
solution4
0 2012-06-23 10:25:15
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>
solution5
0 2014-08-05 15:26:42
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>
solution6
0 2019-02-08 15:17:04
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.